一、基本概念

CSS属性 clear 设置元素是否必须被移动到在它之前的所有相关的浮动元素的下面。该属性可以应用到浮动或非浮动的元素上。

二、属性值

常见取值如下

clear: none;
clear: left;
clear: right;
clear: both;

三、性质

当该属性应用到非浮动的块（块级元素）时，会移动它到所有相关的浮动元素的下面。非浮动块的margin-top和浮动元素的margin-bottom外边距合并为一个外边距，值得注意的是，该外边距的尺寸和浮动元素的margin-bottom保持一致，而不是margin-top和margin-bottom两者中的较大致，（又称外边距折叠、外边距坍塌等等）

所有相关的浮动元素的意思是，当你给非浮动块元素设置clear: left;，那么就只考虑在它之前的所有左浮动的元素，而不关心右浮动的元素。同理clear: left只考虑在它之前的所有右浮动元素，clear: both;只考虑在它之前的所有左浮动和右浮动的元素。

如下图所示：

所有浮动的盒子（div块级元素）都设置了半透明的背景色，当给黄色盒子设置clear:left清除左浮动后，黄色盒子移动到所有左浮动的元素的下方。而不关心右浮动的元素，从图中可以看出右浮动蓝色盒子遮盖了黄色盒子的一部分。

查看或者修改源代码，可以修改黄色盒子的clear属性值，观察效果。

非浮动块的顶部外边距和浮动元素的底部也会发生外边距合并

给100x100的红色盒子设置margin-bottom: 50px; ，黄色盒子设置margin-top: 100px; 由于发生外边距合并，红色盒子和黄色盒子的实际外边距距离为50px，与左浮动的红色盒子的margin-bottom保持一致。这一点与我们通常的取相邻元素两者中较大的margin作为合并后的margin不同！

查看或者修改源代码

浮动元素的顶部外边距和另一个浮动元素的底部不会合并

在上图代码的基础上，为黄色盒子添加浮动 float:left; 和 width: 100%; ，两浮动元素之间的实际外边距为红色盒子的margin-bottom 50px和黄色盒子的margin-top 100px之和150px.

当清除浮动应用到浮动元素上或者说对于浮动的元素应用清除浮动，该浮动元素不会位于它之前的浮动的元素的后面，而只能位于所有的之前的浮动元素的下面。

四、clearfix

当父元素中只包含浮动的子元素，由于浮动的子元素脱离标准文档流，会导致父元素的高度“坍塌”为0。如果不想设置固定的height值，而是希望高度可以自动调节。那么就可以为父元素添加伪元素::after并为::after设置清除浮动的属性。该技巧称为 clearfix。

主要代码如下:

其中#container表示使用id选择器的父元素

#container::after {
  content: "";
  display: block;
  clear: both;
}
1
2
3
4
5