第一种情况:
.content { overflow:hidden; width:100%; height:200px; border:2px dotted blue; } .content .left { float:left; width:200px; border:2px dotted blue; height:300px; background-image:url("1.jpg") } .content .right { margin-left:200px; border:2px solid green; height:400px; background-image:url("a.png") } .buttom { clear:both; height:200px; width:100%; border:1px solid red; } <div class="content"> <div class="left"></div> <div class="right"></div> </div> <div class="buttom"></div>
子div的高度比父div的高度要高, 当父div添加over-flow:hidden/auto;整个界面是以父div的高度为高度的,子div的高度会被隐藏,前提是父div设置高度。如果父div未设置高度,则整个父div会包裹着子div。
原理:必须定义width或zoom:1;同时不能定义height。
优点:代码少,简单,浏览器支持好。缺点:不能和position配合使用,因为超出的尺寸会被隐藏。
2.如果将父div的overflow:hidden删除掉,还想达到这个效果,则,可以如下设置:
<div id="layout">
<div id='left'>Left</div>
<div id="right">Right</div>
<div style="clear:both"></div>
</div>
在父div内添加一个<div style="clear:both"></div> 或者设置clear:left; 父div包裹整个子div。
优点:代码少,简单,浏览器支持好,不易出现怪毛病。缺点,如果页面浮动布局多,就要增加很多空的div。
3.使用伪类:after。必须设置display:block; height:0px; 生成的".",会有高度的。
#layout:after{ content:"."; display:block; clear:both; visibility:hidden; height:0px; }
#layout{
zoom:1
}
IE8以上和非浏览器才支持:after;zoom可解决IE6 IE7浮动问题。
优点:浏览器支持好,缺点,要两句代码结合使用,才能让主浏览器都支持。