Css 去除浮动
清除浮动的方法
清除浮动方法大致有两类,一类是clear:both | left | right
,另一类则是创建BFC
,细分又可以分为多种。
- 通过在浮动元素末尾添加一个空的标签例如并设置样式为
clear:both | left | right
,其他标签br等亦可。
<div class="parent">
<div class="child"></div>
<div style="clear: both;"></div>
</div>
优点:简单。
缺点:增加了额外的标签,并且很显然这并不符合语义化。
*使用 br标签和其自身的 html属性,br 有 clear=all | left | right | none;
的属性。
<div class="parent">
<div class="child"></div>
<br clear='all'>
</div>
优点:简单代码量少,比空标签语义化稍好。
缺点:同上。
- 使用
::after
伪元素(万金油方法)
ps:由于IE6-7不支持:after
,使用`zoom:1
触发hasLayout
。其实是通过 content 在元素的后面生成了内容为空的块级元素
代码如下
.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;//这一条可以省略,证明请看原文精益求精部分
clear:both;
}
.clearfix {
zoom:1;
}
优点:结构和语义化完全正确,代码量居中。
缺点:复用方式不当会造成代码量增加。
伪元素还有一种写法
// 用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
- 父元素设置
overflow:hidden
,(PS:在IE6中还需要触发 hasLayout ,例如zoom:1
)
优点:不存在结构和语义化问题,代码量极少。
缺点:由于hidden的原因,当内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素,还会导致中键失效(鼠标中键)。
- 父元素设置
overflow:auto
属性
优点:同上
缺点:多个嵌套后,会有bug,详情看原文。
- 父元素也浮动
优点:代码少
缺点:总不能一直浮动到body吧。
- 父元素设置
display:table
优点:结构语义化完全正确,代码量极少。
缺点:会造成盒模型的改变。
其余的参考上面如何创建BFC。