浮动是CSS中一个重要的布局属性，可实现元素的左、右对齐，使文本或图片环绕在其他元素周围，增加页面的美观性。然而浮动还有可能带来意想不到的问题，例如元素脱离文档流导致其他元素位置异常等，这时就需要使用清除浮动（clearfix）来解决这个问题。
一、什么是clearfix?
clearfix是一种CSS技巧，可以解决使用浮动属性后，由于高度坍塌造成的容器不能自适应问题。简单来说，就是通过在使用浮动属性的元素外包裹一个带有clear属性的伪元素，来使得容器恢复自己高度。clearfix的实现主要有以下两种方法：
第一种方法是使用 :after 伪元素清除浮动，代码如下：
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
}
.clearfix{
zoom:1; /*IE低版本浏览器触发“hasLayout”，修复ie6、ie7浮动问题*/
}
这种方法使用了CSS3的:before和:after伪元素来清除浮动，其中content属性用于在.:before和:after伪元素中生成内容。display: block属性使生成的元素以块级元素显示，height:0 高度设为0，clear:both则是取消浮动。同时，为了解决IE低版本浏览器的bug，在外层容器设置zoom:1 触发“hasLayout”，修复ie6、ie7浮动问题。
第二种方法是使用overflow属性清除浮动，代码如下：
.clearfix{
overflow:hidden;
zoom:1; /*IE低版本浏览器触发“hasLayout”，修复ie6、ie7浮动问题*/
}
这种方法通过首先给容器添加overflow:hidden或其他非visible的属性，使得浮动元素不会超出自身的容器，然后再触发其中包含浮动元素的父容器的BFC，产生了一种类似于清除浮动的效果。缺点是会产生内容截断现象，因此需要注意。
二、clearfix 的实际应用
clearfix经常被用于解决浮动元素引起的高度塌陷问题，它可以在多种布局场景下被使用，例如固定宽度的浮动元素，自适应宽度的浮动元素等等，下面我们分别介绍这些场景下clearfix如何使用。
1. 固定宽度的浮动元素
在设置宽度的情况下，使用clearfix非常方便，只需要将包含所有浮动元素的容器添加clearfix class即可,示例代码如下：
左侧内容
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/294052.html
微信扫一扫 
支付宝扫一扫 