浮动是 CSS 中一种常用的布局技术，它可以使元素脱离文档流并且向左或向右移动，直到碰到包含框的边缘或其他浮动框为止。
1. 浮动出现的背景
浮动元素出现的主要背景是为了实现文字环绕图片效果，允许文本或其他元素环绕在其周围。
2. 浮动实现布局
两列布局：
<div class="container">
<div class="left-column">左列</div>
<div class="right-column">右列</div>
</div>
.left-column, .right-column {
float: left;
width: 50%;
}
3. 浮动的特征
- 浮动元素脱离了文档流（标准流），不再占据父元素的空间。
- 浮动元素会向左或向右移动（浮动元素在左右方向上会相互贴贴），直到碰到包含框的边缘或其他浮动框。
- 宽度收缩。
<style>
p {
float: left;
background: pink;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisici
ng elit. Consectetur debitis dolores
d laborum omnis totam vel?</p>
</body>
不加 float 宽度会占据整行。加入 float 宽度会收缩，然而可以加上 width 指定宽度。
4. 清除浮动
为了避免浮动元素对其他元素造成的影响，通常需要清除浮动。可以使用 clear 属性清除浮动。
清除浮动，实际上是清除浮动带来的副作用：
贴贴问题
<style>
li {
float: left;
}
</style>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</body>
清除浮动的常用方法：
1. 可以为父元素（比如这里的 ul）添加高度（并且高度需要比子元素高度大）：
如果父元素高度比子元素小：
还是会出现问题。
2. clear 属性：不允许元素的那一边出现浮动。
<style>
ul:nth-of-type(2) {
clear: both;
}
li {
float: left;
height: 20px;
background: pink;
width: 100px;
}
</style>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</body>
但是这种方法会导致 margin 失效。
所以就出现了一些方法来解决这个问题：
3. 隔墙法（添加一个空的 div）：
<style>
.clearfix {
clear: both;
}
ul:nth-of-type(2) {
margin-top: 100px;
}
li {
float: left;
height: 20px;
background: pink;
width: 100px;
}
</style>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
<div class="clearfix"></div>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</body>
4. 然后出现了内墙法（div 放在里面）：
<style>
.clearfix {
clear: both;
}
ul:nth-of-type(2) {
margin-top: 100px;
}
li {
float: left;
height: 20px;
background: pink;
width: 100px;
}
</style>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<div class="clearfix"></div>
</ul>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</body>
5. overflow 属性：
overflow 本来是用于处理溢出内容的显示方式的。
当给父元素添加一个 overflow: hidden; 之后，父元素就会形成一个 BFC，一块独立的显示区域，通过这种方式清除浮动。
<style>
li {
float: left;
height: 20px;
background: pink;
width: 100px;
}
ul {
overflow: hidden;
}
</style>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</body>
6. 伪类（相当于为父元素添加一堵墙）：
最常用：
<style>
li {
float: left;
height: 20px;
background: pink;
width: 100px;
}
ul:nth-of-type(2) {
margin-top: 100px;
}
ul:nth-of-type(1)::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</body>
5. 浮动的现状
虽然浮动在过去被广泛用于实现多列布局和网页排版，但是随着 flexbox 和 grid 等新的布局技术的出现，浮动的使用已经逐渐减少。（可能只有文字环绕这样的效果才会使用浮动？）
现在更推荐使用 flexbox 或 grid 来实现复杂的布局，而将浮动保留用于特定的需求，例如图文混排或导航菜单的横向排列等。
