共计 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 网 – 提供最优质的资源集合！
