css浮动与清除浮动

**浮动：**使元素脱离文档流，按照指定的方向（左或右发生移动）。知道它的外边缘碰到包含框或另一个浮动框位置。

float: left|right|none;

当元素浮动后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流流就会表现得该浮动框不存在一样的布局模式。

当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。
清除浮动：
清除浮动是为了清除使用浮动元素产生的 影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示。
清除浮动的两种方式：

1. 使用clear属性清除浮动。

clear: none|left|right|both;

a. 直接clear: both; 清除
b. 在最后一个标签后边添加一个空的div设置clear: both;
c. 给父元素使用after伪元素清除浮动（推荐使用）：

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

2. 使用BFC块级格式化上下文来清除浮动。
   原理: 强制给一个元素生成一个新的BFC，它不会与其他BFC重叠。

BFC规范：
BFC规范：块级格式化上下文 BlockFormattingContext，是Web页面的可视化css渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

​ BFC是网页的一块区域，元素基于这块区域布局。

​ 一个元素形成了BFC之后，它内部元素产生的布局不会影响到外部元素，外部元素也不会影响到BFC内部元素。就像一个隔离区域，和其他区域互不影响。
创建BFC：

1. 根元素或包含根元素的元素
2. 浮动元素float=left、right、inherit（不能为none）
3. overflow=hidden、auto或scroll（不能为visible）
4. 绝对定位元素position=absolute或fixed
5. display=inline-block、flex、inline-flex、table-cell、table-caption、grid或inline-gird。拥有这些属性的元素成为块级容器。