一、文档流

浏览器在渲染页面时遵循从上往下、从左往右的顺序依次排列元素，这种默认的排版方式称为文档流。

当元素设置了 float 后它会脱离文档流就像“漂”在页面上方。

二、浮动布局的常见痛点与解决思路

1️⃣ 文字环绕效果

痛点：很多新人以为浮动后文字会被覆盖，结果出现文字遮挡图片的情况。

浮动元素脱离文档流后永远不会覆盖文字——文字会自动环绕在浮动元素周围，这是浮动最主要的特性。说起来，

这里是一段示例文本。文字会自动环绕在图片右侧。

效果示意：

• 文字围绕图片四周，没有任何覆盖；即使图片已经脱离文档流，也不会影响文字排版。

2️⃣ 父容器高度塌陷

痛点：子元素全部使用浮动后父容器高度变为 0，导致后续内容“跑到”浮动元素旁边或重叠。

hello world

• 的实际高度为 0，因为所有子项都脱离了文档流。

• /

• 由于浮动元素不覆盖文字。“hello world” 出现在右侧，而不是下面。

3️⃣ 行内块级元素间隙问题

痛点：使用 display:inline-block 时HTML 源码中的换行会被渲染成空白间隙，导致布局出现不期望的空白。

方法：给父容器设置 消除换行符产生的空白，接下来再给子元素恢复正常字体大小。

ul.inline-list {
font-size: 0;/* 消除空白间隙 */
}
ul.inline-list .item {
display: inline-block;
font-size: 16px;
/* 恢复子元素字体 */
}

• font-size:0; 会让父容器内部所有字符消失，从而去掉间隙。

三、清除浮动带来的负面影响——五种实用方法

再看方法一。给父容器设置固定高度

ul {
说到height，100px;话说回来，/* 写死高度，不够灵活 */
}

至于方法二。末尾添加空元素 + clear

Pain Point：需要额外插入无意义的 DOM，破坏语义结构。怎么说呢，

再看方法三。使用 after 伪元素清除

ul::after{
content:'';/* 必须有 content */
clear这方面，both;display:block;}

至于方法四。让受影响的兄弟元素自行 clear

h2{
说到clear，both;}

• Pain Point：This only solves a single element and will break again if you insert new elements before cleared one.

至于方法五，把父容器变成 BFC

ul{
overflow:auto;/* 或 overflow:hidden */
/* 同时触发 BFC，使父容器能“感知”子浮动的高度 */
}

四、BFC详解

什么是 BFC？其实，

BFC是一个独立的渲染区域。它拥有自己的一套布局规则，使得容器内部的子元素不会影响外部，也不会受到外部影响。

BFC 的渲染规则

1. BFC 容器内部的子元素仍然遵循从上到下、从左到右的排列顺序。
2. BFC 是独立的块级上下文。它内部的子盒子不会影响外部盒子的位置或尺寸 .
3. BFC 在计算自身高度时会把**浮动子元素**的高度也计入进去，从而避免父容器塌陷。不过，