1,低级div定义height
原理:父级div手动定义height.就解决了父级div无法自动获取到高度的问题,简单、代码少,容易掌握,但只适合高度固定的布局,
2,结尾处加空div标签clear: both
原理:在浮动元素的后面添加一个空div兄弟元素,利用Css提高的clear: both清除浮动,让父级div能自动获取到高度,如果页面浮动布局多,就要增加很多空div,让人感觉很不好
3,父级div定义 伪类: after 和zoom
/清除浮动代码*/ .clearfix: after{ content:""; display: block; visibility: hidden; height: 0; line-height: 0; dlear both; } .clerfrx{zoom:1}
原理: IE8以上和非E浏览器才支持:after,原理和方法2有点类似,zoom(IE 专有属性)可解决ie6,ie5浮动问题,推荐使用,建议定义公共类,以减少CSS代码。
4,父级div定义overflow:hidden超出盒子部分会被隐藏,不推荐使用。
5,双伪元素法
.clearfix:before,.clearfix:after{ content:""; display:block; clear:both; } .clearfix{ zoom:1; }