一篇文章带你拿捏「CSS浮动布局」理解文档流：布局的基石在深入浮动布局之前，我们首先要明白“文档流”这一概念。简单来说

理解文档流

在深入浮动布局之前，我们首先要明白“文档流”这一概念。简单来说，文档流是浏览器在渲染网页时，默认的元素排列方式。它遵循从左到右、从上到下的顺序，将块级元素垂直排列，行内元素水平排列。所有未脱离文档流的元素，都会按照这个规则占据自己的空间。浮动，正是改变这种默认文档流的一种强大工具。

浮动布局的诞生与应用

浮动（float）属性最初并非为页面布局而生，它的设计初衷是为了实现文字环绕图片的效果，就像报纸杂志中图文混排那样。然而，随着网页设计需求的演变，开发者们发现浮动可以巧妙地用于实现多列布局，从而成为早期实现水平排列的重要手段。

浮动的初衷：文字环绕图片

想象一下，你有一张图片，希望文字能够围绕着它流动，而不是被图片生硬地隔开。这时，给图片设置 float: left; 或 float: right; 就能轻松实现这一效果。图片会脱离文档流，向左或向右浮动，而文字则会围绕在它的另一侧。

示例代码：

<div class="container">
    <img src="your-image.jpg" alt="示例图片" class="float-left">
    <p>这是一段文字，它将围绕着左浮动的图片进行环绕。通过CSS的float属性，我们可以轻松实现这种图文混排的效果，让页面布局更加灵活和美观。这种技术在早期的网页设计中非常常见，尤其是在新闻文章或博客中，用于提升阅读体验。</p>
    <p>文字会继续环绕图片，直到图片的高度结束。如果文字内容足够长，它会继续在图片下方正常排列。这就是浮动最基础也是最直观的应用之一。比如现在这个例子。</p>
</div>

.float-left {
    float: left;
    margin-right: 15px; /* 图片右侧留出一些间距 */
    margin-bottom: 10px; /* 图片下方留出一些间距 */
    width: 150px; /* 示例图片宽度 */
    height: auto;
}
.container {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
}

水平布局方法对比

在实现水平排列元素时，我们有两种常见选择：

使用inline-block：

.list {
    font-size: 0; /* 消除间隙问题 */
}
li {
    display: inline-block;
    font-size: 16px; /* 恢复字体大小 */
}

使用float：
```
li {
    float: left;
}
```

两种方法各有优缺点，inline-block会产生元素间的间隙问题（需要设置父元素font-size: 0来解决），而float则会导致父元素高度塌陷问题。

浮动带来的问题：高度塌陷

浮动最常见的问题是：浮动元素会脱离正常文档流，导致父容器无法正确计算高度，这就是所谓的"高度塌陷"问题。

例如，当所有子元素都浮动时，父容器的高度会变为0，导致后续元素上移，破坏页面布局。这种情况下，我们需要"清除浮动"。

清除浮动的方法

1. 设置父容器高度（不推荐）

直接给父容器设置固定高度可以解决问题，但这种方法缺乏灵活性，一旦内容变化，高度可能不再适用。

2. 添加空div并清除浮动（不推荐）

<div style="clear: both;"></div>

这种方法虽然有效，但会引入无意义的HTML元素，不符合语义化原则。

3. 伪元素清除浮动（推荐）

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

使用伪元素是一种优雅的解决方案，它不需要添加额外的HTML元素。

4. 创建BFC容器（最推荐）

将父容器设置为BFC（块级格式化上下文）是解决浮动问题的最佳方式，因为BFC容器会计算浮动元素的高度。

.parent {
    overflow: hidden; /* 创建BFC */
}

什么是BFC？

BFC（Block Formatting Context，块级格式化上下文）是CSS中的一个重要概念，类似于JavaScript中的块级作用域。

创建BFC的方法：

overflow: hidden | auto | scroll | overlay
position: absolute | fixed
display: inline-block | table-cell | flex | grid
float: left | right

BFC容器的特点：

拥有独特的渲染规则
子容器的margin-top不会与父容器的margin-top重叠
计算BFC容器高度时，浮动元素也参与计算

例如，以下代码通过设置overflow: hidden创建了BFC，解决了margin重叠问题：

.parent{
    overflow: hidden; /* 创建BFC */
    margin-top: 100px;
}
.child{
    margin-top: 50px;
}

在这个例子中，子元素的margin-top不会与父元素的margin-top发生重叠，因为父元素是一个BFC容器。

总结

浮动布局是CSS中一项基础而重要的技术，它最初为文字环绕图片而生，后来成为了网页布局的重要手段。虽然浮动会导致一些问题，如高度塌陷，但我们可以通过多种方法来清除浮动，其中创建BFC容器是最优雅的解决方案。