2. 浮动布局

说起浮动布局，我入行那会儿它可是页面布局的「顶梁柱」。现在flex和grid大行其道，但float这套东西你还是要懂——老项目维护、某些特殊场景，它依然能打。

说白了，float最初的设计初衷根本不是用来做布局的。它最早是为了实现「文字环绕图片」这种排版效果。就像报纸上图片旁边绕着一圈文字那样。后来大家发现，哎？这东西好像能用来做分栏布局？于是就有了各种float布局的骚操作。

float属性的基本行为

float有三个常用值：left、right和none。元素一旦设置了float，就会脱离标准文档流，向左或向右靠拢，直到碰到父容器边界或另一个浮动元素。

.box {
    float: left;   /* 向左浮动 */
    width: 200px;
    height: 100px;
    background: #4A90D9;
}

嗯，这里要注意：浮动元素会脱离文档流，但不会脱离文本流。什么意思？就是元素本身不占位了，但里面的文字内容还是会绕着它走。这就是为什么float能实现文字环绕效果。

清除浮动的N种姿势

我在项目中遇到过最头疼的问题就是浮动带来的高度塌陷。父元素里全是浮动子元素，结果父元素高度变成0了。那会儿调试了半天，才发现是没清浮动。

清除浮动的方法有很多，我挑几个常用的说说：

1. 额外标签法

最原始的方法，在浮动元素后面加一个空标签，设置clear属性。

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

这个方法简单粗暴，但会多出无意义的HTML结构。我个人不太推荐，除非是快速调试。

2. 父元素使用overflow

给父容器设置overflow: hidden或overflow: auto，就能触发BFC（块级格式化上下文），自动包含浮动元素。

.parent {
    overflow: hidden;  /* 触发BFC */
}

这个方法简洁，但有个坑：如果内容超出父容器，会被裁剪掉或者出现滚动条。我曾经因为这个踩过坑，内容被裁了一半，排查了好久。

3. 伪元素清除法（推荐）

这是目前最优雅的方式，用CSS伪元素来清除浮动，不污染HTML结构。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

/* 或者更简洁的写法 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

4. 双伪元素法

有些场景下，单伪元素可能不够稳定，可以用双伪元素。

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

你想想看，为什么要有before？因为可以防止外边距合并。这个细节很多人会忽略。

实战：两栏自适应布局

两栏布局是浮动最经典的应用场景。左边固定宽度，右边自适应填满剩余空间。

<div class="two-column">
    <div class="sidebar">侧边栏</div>
    <div class="main">主内容区</div>
</div>

.sidebar {
    float: left;
    width: 200px;
    background: #f0f0f0;
    height: 300px;
}
.main {
    margin-left: 220px;  /* 200px宽度 + 20px间距 */
    background: #e0e0e0;
    height: 300px;
}

这里有个细节：主内容区的margin-left要大于侧边栏宽度，留出间距。我刚开始做的时候经常忘记算间距，结果两个区块贴在一起了。

实战：三栏自适应布局

三栏布局稍微复杂一点。常见的需求是：左右固定宽度，中间自适应。

<div class="three-column">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="center">中间内容</div>
</div>

.left {
    float: left;
    width: 200px;
    background: #f0f0f0;
    height: 300px;
}
.right {
    float: right;
    width: 200px;
    background: #f0f0f0;
    height: 300px;
}
.center {
    margin: 0 220px;  /* 左右各留出间距 */
    background: #e0e0e0;
    height: 300px;
}

为什么会这样？因为浮动元素会尝试向上靠拢，如果前面有非浮动元素挡住了，它就上不去。这个顺序问题我当年栽过跟头，调试了一下午才搞明白。

浮动布局的知识体系

下面这张图帮你理清浮动布局的核心逻辑：

浮动布局虽然老，但它的设计思想影响了后来很多布局方案。你掌握了float，再学flex和grid会更容易理解——因为它们解决的都是同一个问题：元素在页面中怎么排列。

好了，float这块的内容就聊到这儿。记住核心：浮动是脱离文档流但保留文本流，清除浮动用伪元素法最优雅，两栏三栏布局注意HTML顺序和间距计算。这些经验都是真金白银换来的，你多练几次就熟了。