前端培訓(xùn)清除浮動(dòng)造成的影響方法三
方法三:使用內(nèi)墻元素隔離法
在方法二的結(jié)尾我們說(shuō)了,額外增加了一個(gè)元素,影響了整體的結(jié)構(gòu)?????
???????? 那么,我們就干脆把這堵”墻”放在#wrap元素內(nèi)部
|
????<div?id="wrap"> ????????<div?id="inner"></div> ????????<div?id="wrap2">"內(nèi)墻"</div> ????</div> ????<div?id="content">123</div> |
|
????<style> ????????#wrap{ ????????????background-color:?red; ????????} ????????#inner{ ????????????width:300px; ????????????height:300px; ????????????float:?left; ????????????background-color:?blue; ????????} ????????#wrap2{ ????????????height:?50px; ????????????background-color:?yellow; ????????????clear:both; ????????} ????????#content{ ????????????background-color:?gray; ????????} ????</style>
|
| ? |
我們這時(shí)候給#wrap元素和#content元素之間添加一堵墻(一個(gè)元素),并給他添加上clear屬性,從而清除該元素受到的浮動(dòng)的影響,使得后續(xù)的布局能正常顯示
|
<div?id="wrap"> ????????<div?id="inner"></div> ????</div> ????<div?id="wrap2">”外墻”</div> ????<div?id="content">123</div> |
|
<style> ????????#wrap{ ????????????background-color:?red; ????????} ????????#inner{ ????????????width:300px; ????????????height:300px; ????????????float:?left; ????????????background-color:?blue; ????????} ????????#wrap2{ ????????????height:?50px; ????????????background-color:?yellow; ????????????clear:both; ????????} ????????#content{ ????????????background-color:?gray; ????????} ????</style> |
 |
說(shuō)明:
- 在我們把”墻”放到#wrap元素中,出現(xiàn)了神奇的效果,#wrap元素居然有高度了
- 原因就是#wrap2元素被固定在浮動(dòng)元素的下面, #wrap元素想要包含住這個(gè)新的<div>則必須自己有高度才行, 然后他就自己有了高度
???????? 3.缺點(diǎn):
(1)額外增加了一個(gè)元素,影響整體結(jié)構(gòu)
(2)在相當(dāng)長(zhǎng)的一段時(shí)間內(nèi), 這個(gè)方法是各大公司常用的手段
