Posted on | by liu
CSS清除左右浮动
在进行网页布局时，大家经常使用浮动来实现元素的定位。但是，如果浮动的元素不被清除，就会出现一系列的问题，影响整个页面的布局。本文将介绍如何使用CSS清除浮动。
清除浮动的方法
在使用浮动时，大家需要对浮动的元素进行清除，以防止布局的错乱。下面是几种清除浮动的方法：
1.给父元素添加清除属性
大家可以给浮动元素的父元素添加`clear`属性，来实现清除浮动的效果。这个属性有四个值可选：
– `left`：清除左侧浮动
– `right`：清除右侧浮动
– `both`：清除左右两侧浮动
– `none`：默认值，不清除浮动
例如：
.clearfix::after {
content: "";
display: block;
clear: both;
}
在这个例子中，大家通过伪元素`::after`来为父元素添加了一个空的块级元素，并设置了`clear`属性为`both`，来清除左右两侧的浮动。
2.利用overflow属性
还可以利用`overflow`属性来清除浮动：
.clearfix {
overflow: hidden;
}
这个方法的原理在于，当给一个元素设置了非`visible`的`overflow`，就会生成一个包裹所有子元素的BFC（块级格式化上下文），从而达到清除浮动的效果。
其中，BFC的实现有以下条件：
– 根元素或包含根元素的元素
– 浮动元素（元素的`float`不是`none`）
– 绝对定位元素（元素的`position`为`absolute`或`fixed`）
– 行内块元素（元素的`display`为`inline-block`）
– 表格单元格（元素的`display`为`table-cell`）
– overflow属性值不为`visible`的块元素
需要注意的是，当给元素设置了`overflow: visible`时，会使子元素溢出父元素并不会触发清除浮动，这时需要使用其他方法。
3.使用伪元素
还可以使用伪元素来清除浮动：
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
这个方法的原理是，在父元素的最后一个浮动元素之后，添加一个空的、高度为0的块级元素，并且将`clear`属性设置为`both`，从而清除左右两侧的浮动。
同时，因为伪元素是没有实际占据空间的，所以大家需要使用`zoom: 1`来触发IE6/7的布局模式，并清除父元素的overflow属性，以便子元素越出父元素时也能正常显示。
4.给浮动元素添加清除属性
还可以直接给浮动元素添加清除属性：
.element {
clear: left;
}
这个方法适用于对一些特定的浮动元素进行清除，例如一个浮动的图片想要换行。
总结
以上就是几种清除浮动的方法。当大家使用浮动进行定位时，一定要记得清除浮动，以保证整个页面布局的稳定性。