CSS浮动布局与清除浮动，传统布局技术的深入解析

在早前CSS浮动标签曾是实现多栏布局的核心技术。虽然现代布局有Flexbox和Grid，但理解浮动对处理旧代码和特定场景（如文字环绕）仍至关重要。

本文将详解CSS浮动布局与清除浮动其原理与问题解决方案。

一、浮动的初衷与作用

float属性最初是为了实现文字环绕图片的效果。它有三个值：

• left：元素向左浮动。
• right：元素向右浮动。
• none（默认）：不浮动。

<img src="pic.jpg" style="float: left; margin-right: 15px;">
<p>这段文字将会环绕在图片的右侧...</p>

后来，开发者利用浮动元素脱离正常文档流的特性，将其用于整个页面的多栏布局。

二、浮动的副作用：高度塌陷

当一个父元素包含多个浮动子元素时，父元素的高度会坍塌为0，导致布局错乱。这是因为浮动元素脱离了文档流，父元素无法计算其高度。

​问题代码：​​

<style>
    .box { float: left; width: 50%; }
</style>

<div class="container" style="border: 2px solid red;">
    <div class="box">左栏</div>
    <div class="box">右栏</div>
</div>

此时，.container的红色边框会缩成一条线，因为它的高度为0。

三、清除浮动（Clearfix）

为了解决高度塌陷，我们需要“清除浮动”。有几种经典方法：

1. ​空div法（古老，不推荐）​​：在浮动元素后添加一个空div并设置clear: both;。

   <div class="container">
       <div class="box">左栏</div>
       <div class="box">右栏</div>
       <div style="clear: both;"></div> <!-- 清除浮动 -->
   </div>

2. ​overflow法​：为父元素设置overflow: hidden;或overflow: auto;，触发BFC（块级格式化上下文）来包含浮动。

   .container { overflow: hidden; }

   缺点：可能会裁剪掉定位在容器外的内容或产生滚动条。

3. ​伪元素清除法（现代最佳实践，Clearfix Hack）​​

   这是目前最流行、最清晰的方法。

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

   然后在需要清除浮动的父元素上添加.clearfix类即可。

   <div class="container clearfix"> ... </div>

四、总结

浮动布局是CSS历史中的重要一章。理解其原理和问题（特别是高度塌陷和清除浮动）对于维护旧项目和理解CSS布局演进非常有帮助。