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属性值,观察效果。
非浮动块的顶部外边距和浮动元素的底部也会发生外边距合并
给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;
}