在网页设计中经常采用浮动模型(Float Model)进行布局,这种布局的自由度相对来说比较高,因此应用得比较广泛。但是在浮动下,有时会出现一些问题,如浮动的子元素不会撑开父元素的背景、高度等,这个对任何一个布局者都是一个难题。下面对清除浮动的常用方法简要归纳一下。
一、使用不浮动的空区块(clear: both; )
.clearbox {
clear: both;
border-top: 1px solid transparent !important;
margin-top: -1px !important;
border-top: 0px;
margin-top: 0px;
height: 0px;
background: none;
font-size: 0px;
visibility: hidden;
}
<div class="content">
<div class="right">Right</div>
<div class="left">Left</div>
<div class="clearbox"></div>
</div>
二、使用 overflow 属性
overflow 用以检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
这个方法比较简单,对于不适用于使用不浮动的空区块(clear: both; )时,使用这 overflow 属性简单易行。
三、使用 :after 属性(非 IE 浏览器适用)
使用“:after”和 content 属性一起使用,用以设置在对象后(依据对象树的逻辑结构)发生的内容。
需要注意:要将区块的高度设置为零(即height: 0px;);content 定义是必须的,但其值可以为空。