清除浮动的CSS属性

KYKS • 2024-10-04 00:22 • 编程

浮动是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属性和方法的详细阐述，我们可以通过多种方式达到清除浮动的目的，选择适合自己的方法可以避免布局带来的各种问题。

原创文章，作者：KYKS，如若转载，请注明出处：https://www.506064.com/n/139616.html