CSS 清除浮动

CSS 清除浮动

一、基本概念

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属性值,观察效果。

www.zeeklog.com  - CSS 清除浮动


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

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

查看或者修改

www.zeeklog.com  - CSS 清除浮动

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

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

www.zeeklog.com  - CSS 清除浮动

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

四、clearfix

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

主要代码如下:

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

#container::after {
  content: "";
  display: block;
  clear: both;
}