在 CSS 中,清除浮动是为了解决在容器中使用浮动元素时可能导致的高度塌陷问题。常见的清除浮动的方法有以下几种:

使用空元素清除浮动(clearfix hack):
在浮动元素后面插入一个空元素,并给该空元素应用清除浮动的样式。

.clearfix::after {
content: “”;
display: table;
clear: both;
}

在使用的地方添加 clearfix 类:

.container:after {
content: “”;
display: table;
clear: both;
}

使用伪元素清除浮动:
类似于上面的方法,但使用伪元素 ::after 来清除浮动。

.clearfix::after {
content: “”;
display: table;
clear: both;
}

使用 overflow 属性清除浮动:
给包含浮动元素的容器添加 overflow: hidden; 属性。

.container {
overflow: hidden;
}

或者使用 overflow: auto;:

.container {
overflow: auto;
}

使用 BFC(块级格式上下文):
触发 BFC 也可以清除浮动,例如给容器添加 display: flow-root; 或 display: inline-block;。

.container {
display: flow-root; /* 或 display: inline-block; */
}
注意:这可能影响容器的其他布局特性,因此谨慎使用。

作者 dairubin

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注