为什么需要清除浮动

共计 1230 个字符，预计需要花费 4 分钟才能阅读完成。

浮动是 CSS 中常见的一种布局方式，通过浮动可以实现多列布局、文字环绕图片等效果。但是在使用浮动时，我们也会发现一个问题，那就是浮动元素会导致父元素高度塌陷，使得父元素无法正常占据空间，从而影响整个页面的布局。为了解决这个问题，我们就需要清除浮动。

清除浮动的方法

常见的清除浮动的方法有以下几种：

1. 父级元素设置高度

通过为父级元素设置一个具体的高度，可以强制让父元素占据空间。但是这种方法的缺点是无法适应内容变化，如果内容高度超过了设定的高度，就会出现溢出的情况。

2. 父级元素设置 overflow 属性

通过为父级元素设置 overflow 属性为 hidden、auto 或 scroll，可以让浮动元素被父元素包裹，并且父元素可以正常占据空间。但是这种方法的缺点是如果出现内容超出父元素的情况，就会被裁剪掉。

3. 在浮动元素后添加一个空的块级元素

通过在浮动元素后添加一个空的块级元素，并且为其设置 clear 属性为 both，可以让浮动元素被父元素包裹，并且父元素可以正常占据空间。但是这种方法的缺点是会增加页面中无意义的元素，不够优雅。

4. 使用伪元素清除浮动

通过在父元素上使用::after 伪元素，并且为其设置 clear 属性为 both，可以清除浮动。这种方法优雅简洁，且不会增加无意义的元素，是目前比较流行的一种清除浮动的方法。

清除浮动后为什么还是不占位置

虽然清除浮动可以解决父元素高度塌陷的问题，但是有时候我们会发现清除浮动后，浮动元素仍然不占据位置，这是为什么呢？

这是由于浮动元素脱离了正常的文档流，在布局时不再参与其他元素的定位和排布，因此在某些情况下，浮动元素的位置不会被计算在内。为了解决这个问题，我们可以通过以下几种方法来让浮动元素占据位置。

1. 在父元素中添加 clearfix 类

通过在父元素中添加 clearfix 类，并且在 CSS 中设置 clearfix 类的样式，可以让浮动元素占据位置，并且不影响其他元素的排布。clearfix 类的样式如下：

.clearfix::after {

content: “”;

display: block;

clear: both;

}

2. 在浮动元素上添加 clear 属性

通过在浮动元素上添加 clear 属性，可以让浮动元素占据位置。但是需要注意的是，如果浮动元素本身就是一个 clear 元素，那么这种方法就会失效。

3. 使用 flex 布局

通过使用 flex 布局，可以让浮动元素占据位置，并且不影响其他元素的排布。flex 布局可以实现灵活的布局方式，可以解决很多传统布局方式无法解决的问题。

清除浮动是 CSS 布局中常见的问题，通过使用合适的清除浮动方法，可以避免父元素高度塌陷的问题。但是在清除浮动后，浮动元素有时候会不占据位置，需要通过一些方法来解决。在实际开发中，我们需要根据具体情况选择合适的清除浮动方法，以及解决浮动元素不占据位置的问题。

TAGS

清除浮动，CSS 布局，父元素，浮动元素，占据位置，clearfix，flex 布局

丸趣 TV 网 – 提供最优质的资源集合！