浮动是CSS布局中常用的一种方式,可以让元素在页面中浮动自由排列,常见的应用包括图文混排和导航栏。然而,浮动元素可能会对周围的元素造成影响,导致布局错乱,此时我们需要清除浮动。本文将从多个方面详细阐述清除浮动的CSS属性。
一、清除浮动的CSS属性是什么
清除浮动的CSS属性是clear。它用于规定元素的哪个侧面不允许有浮动元素。
二、清除浮动的CSS写法正确的是
清除浮动的方式有很多种写法,如下是最常见的两种写法:
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
在父元素上添加clearfix类,同时清除浮动:
.clearfix:after{
clear: both;
content: '';
display: block;
}
.clearfix{
*zoom: 1;
}
三、CSS如何清除浮动
1. overflow清除浮动
使用overflow属性,将容器元素的值设置为hidden、auto或者scroll,因为浮动元素会导致容器元素高度塌陷,而这些属性可以使容器元素自适应内部元素高度,从而清除浮动,如下例:
.container{
overflow: hidden;
/* or overflow: auto; */
/* or overflow: scroll; */
}
2. clear清除浮动
clear属性用于清除浮动元素对周围元素的影响,取值有left、right、both、none等。如下例:
.clearfix::after{
content:"";
display:block;
clear:both;
}
3. 双伪元素清除浮动
使用伪元素:after和:before,可以使用和清除浮动的宽高为0、inline-block的元素占位,防止元素塌陷。如下例:
.clearfix::after, .clearfix::before {
content:"";
display: block;
height:0;
overflow:hidden;
clear:both;
}
.clearfix {
zoom:1;
}
四、CSS清除所有浮动
清除所有浮动元素可以使用下面的代码:
.clear{
clear:both;
display:block;
height:0;
font-size: 0;
content:"";
}
这里设置了字体大小为0,是为了使该元素不占用任何垂直空间。
五、CSS清除浮动的其他方法
1. 不使用浮动
最好的方法是不使用浮动,而是使用Flexbox布局、Grid布局等现代化的CSS布局方式。
2. 使用fit-content()函数
fit-content()函数可以使元素自适应内部元素高度或宽度,替代 overflow 属性,如下例:
.container{
height: fit-content;
}
3. 使用display:table属性
在容器元素上使用display:table属性,内容元素使用display:table-cell属性可以使元素自适应内部元素高度,而不需要清除浮动。如下例:
.container{
display: table;
}
.container .item{
display: table-cell;
}
结语
以上是清除浮动的CSS属性和方法的详细阐述,我们可以通过多种方式达到清除浮动的目的,选择适合自己的方法可以避免布局带来的各种问题。