清除浮动的方法
-
额外标签法(隔墙法),W3C推荐做法
在浮动元素末尾添加一个空的标签。
例如 html部分: <div class="purge"></div> css部分: .purge { clear: both; } 强调一下这个空标签必须是块级元素,还有这里的类名是自己定义的,这里用了purge(清除)当作类名。
-
父级添加overflow属性
给父级添加overflow属性,将其属性值设置为hidden、auto或者scroll
最常使用: overflow: hidden;
注意:这种方式的缺点是无法显示溢出的部分,使用时确保无溢出!
-
父级添加 :after伪元素
:after方式也是给父元素添加类名
css部分: .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; } html部分:给父元素添加clearfix类
这种清除浮动的方式没有增加标量,结构更简单一些,但是需要照顾低版本的浏览器,像IE6、7版本。百度,淘宝等大型企业都使用这种方式清除浮动。
-
父级添加双伪元素
:before、:after方式也是给父元素添加类名
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } html部分:给父元素添加clearfix类
这种方式清除浮动也是很多企业在使用的方式,比如小米、腾讯等,所以在清除浮动的时候推荐大家使用的哦^ = ^