常用的一般为三种.clearfix
, clear:both
,overflow:hidden
;
比较好是 .clearfix
,伪元素万金油版本,后两者有局限性.
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } <!-- 为毛没有 zoom ,_height 这些,IE6,7这类需要 csshack 不再我们考虑之内了 .clearfix 还有另外一种写法, --> .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ zoom:1; } <!-- 用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式 -->
clear:both
:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden
:这种若是用在同个容器内,可以形成 BFC
避免浮动造成的元素塌陷