前端培训清除浮动造成的影响方法三
方法三:使用内墙元素隔离法
在方法二的结尾我们说了,额外增加了一个元素,影响了整体的结构
那么,我们就干脆把这堵”墙”放在#wrap元素内部
|
<div id="wrap"> <div id="inner"></div> <div id="wrap2">"内墙"</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>
|
我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示
|
<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> |
 |
说明:
- 在我们把”墙”放到#wrap元素中,出现了神奇的效果,#wrap元素居然有高度了
- 原因就是#wrap2元素被固定在浮动元素的下面, #wrap元素想要包含住这个新的<div>则必须自己有高度才行, 然后他就自己有了高度
3.缺点:
(1)额外增加了一个元素,影响整体结构
(2)在相当长的一段时间内, 这个方法是各大公司常用的手段
