浮动
- 浮动是一种常见的CSS属性，它可以使元素脱离文档流并进行特殊布局。下面是浮动的几个特点：
- 脱离文档流：浮动的元素将不再占据文档流中的空间，其他元素会忽略它的存在。这使得浮动元素可以在文档中自由地定位。
- 文字环绕：浮动元素可以使文本环绕在它的周围，达到视觉上的效果。
- 同行显示：浮动元素可以让块级元素在一行显示，而不是垂直排列。
- 可以设置宽高：浮动可以让行内元素也可以设置宽高，这使得行内元素可以像块级元素一样布局。
- 可以使用margin，但不能使用margin: 0 auto：浮动元素可以使用margin来设置外边距，但是无法使用margin: 0 auto来水平居中。
清除浮动
- 浮动的布局可能会导致父容器塌陷或子元素溢出的问题。为了解决这些问题，我们可以使用以下几种方法来清除浮动：
- 给父容器设置高度：通过给父容器设置一个固定高度，来避免父容器塌陷的问题。这种方法比较简单，但是需要提前知道容器的高度。
- 增加子容器，在子容器身上清除浮动：可以在父容器内增加一个新的子容器，然后对该子容器应用清除浮动的样式，例如使用clear: both。
- 借助伪元素 after 来清除浮动：在父容器的样式中添加伪元素:after，然后对该伪元素应用清除浮动的样式，例如使用clear: both，这样可以避免添加额外的标签。
- BFC（块级格式化上下文）：BFC是一种特殊的渲染环境，可以对浮动进行隔离，避免布局问题。接下来将详细介绍BFC。
请看以下代码（只截取部分，注意区分）： 我们在body中放入俩个块级元素 ul、div，ul中三个块级元素li。当我们给它们设置一些基础的css样式时（list-style: none 用于消除li前的点），发现它如下图所示
css
ul li{
list-style: none;
width: 200px;
height: 100px;
background-color: #8fe418;
}
.content{
width: 100%;
height: 200px;
background-color: #ec6110;
}
<body>
<ul class="clear">
<li>1</li>
<li>2</li>
<li>3</li>
<!-- <div class="clear"></div> -->
</ul>
<div class="content"></div>
</body>
当我们给ul li设置float属性：float: left; 会发现：
他们紧紧排列在了一行中（行内块级元素），这时候我们称li 脱离了文档流。在二维的视角里，它就像是盖在了 content 上，我们引入三维视角能更好理解它，就是它其实是悬浮在content上的（为了理解，并不是真的这样），你li跟我content不是一个level了。
css
ul{ /*清除浮动第一式*/
height: 100px;
}
.clear{ /*清除浮动第二式*/
clear: left;
}
/*小技巧：在使用该方法时，可以在::after前面加一个.clear,相当于我提前给这个样式规定好了
只清除clear的浮动，当我们需要清除浮动时，需要在同级创建一个类名为clear的div盒子。
如上诉第19行。*/
.clear::after{
content: '';
clear: both;
display: block;
}
这样就达到了我们想要的效果。
BFC（块级格式化上下文）
BFC是一种CSS渲染环境，它可以对浮动进行隔离，使内部元素与外部元素相互隔离，不会相互影响。以下是创建BFC的几种方式：
- 浮动：通过给元素设置float: left 或 float: right来触发BFC。该元素即会脱离文档流，同时也会创建一个BFC环境。
- 定位：通过给元素设置position: absolute 或 position: fixed来触发BFC。
- 行内块：通过给元素设置display: inline-block来触发BFC。
- 表格单元：通过给元素设置display: table-cell来触发BFC。
- overflow: auto || hidden || scroll：通过给元素设置overflow属性值为auto、hidden或scroll来触发BFC。
- 弹性盒子：通过给元素设置display: flex 或 display: inline-flex来触发BFC。
BFC容器具有以下特征：
- 内部盒子也会按照文档流的顺序排列，并不会被浮动元素覆盖或溢出。
- BFC容器在计算高度时，会将内部浮动的子元素的高度也计算在内，从而避免父容器塌陷的问题。
- BFC可以解决外边距重叠的问题，使得相邻的块级元素的外边距不会互相合并。
通过合理使用浮动和BFC，我们可以实现复杂的布局和解决一些常见的布局问题。深入理解这些概念对于掌握CSS布局是非常重要的。