关于BFC和清除浮动详解

近期总结回顾前端知识，对清楚浮动和BFC有了更深刻更细致的理解，先把总结的文档放在这里，后面有时间再增加解释。
如有疑问或有误解的地方，欢迎评论指正！

格式化上下文

块级格式化上下文（Block Formatting Context，BFC）

概念

BFC 属于普通流，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

BFC的特性

• 清除内部浮动：BFC元素内部浮动元素的高度也会撑开BFC盒子的高度，但是不能解决内部浮动元素盖住同级元素的问题
• 清除外部浮动：BFC元素不会被外层同级浮动元素盖住。（利用这一点可以实现一侧固定，一侧自适应布局）
• 防止外边距重叠

创建BFC

• 文档的根元素（）。
• 浮动元素（即 float 值不为 none 的元素）。
• 绝对定位元素（position 值为 absolute 或 fixed 的元素）。
• 行内块元素（display 值为 inline-block 的元素）。
• overflow 值不为 visible 或 clip 的块级元素。
• display 值为 flow-root 的元素。
• 匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
• 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
• 表格标题（display 值为 table-caption，HTML 表格标题默认值）。
• contain 值为 layout、content 或 paint 的元素。
• 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
• 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
• 多列容器（column-count 或 column-width 值不为 auto，且含有 column-count: 1 的元素）。
• column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中

浮动（float属性）

浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。

值

• 左浮动 float:left;；右浮动：float:right;；默认不浮动float:none;

作用

可以实现文本绕图、左侧固定右侧自适应布局、多栏布局等

清除浮动

清除浮动其实是清除浮动带来的影响，浮动元素脱离标准流后，不占位置，其后的元素会依次环绕其周围排布。主要是为了解决：（清除浮动后可以同时解决以下两种问题）

• 父元素因为子级元素浮动引起的内部高度为0的问题
• 同级元素因为同级元素的浮动被同级浮动元素盖住

一、clear属性清除浮动

clear属性可以用来清除左右侧的浮动元素带来的影响，会使设置的元素移动到浮动元素的下方（值为：left，right，both）。可以通过此属性来同时解决两个浮动问题，但是因为元素移动到浮动元素下方，所以无法通过此种方案来实现双栏布局。

1. 额外标签法

在最后一个浮动标签后添加一个标签，样式设置上clear:both; 缺点：添加无意义标签，语义化差

2. 设置clearfix

/* 给父容器添加样式 */
.wrapper::after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.wrapper::before {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

二、创建BFC清除浮动

通过父BFC盒子可以使内部浮动元素计算高度，通过同级BFC盒子可以使元素不被同级浮动元素盖住。

1. clearfix创建BFC清除浮动

缺点：用zoom:1触发hasLayout

.clearfix:after,.clearfix:before{
     content: "";
     display: table;/*触发BFC，实现清除浮动*/
}
.clearfix{
     *zoom: 1;
}

2. overflow创建BFC

将父容器的 overflow 属性设置为除 visible 外的其他值。创建了BFC。缺点：可能会出现莫名其妙的滚动条或裁剪阴影

3. display: flow-root创建BFC

一个较为现代的方案是使用 display 属性的 flow-root 值设置给父容器。它可以无需小技巧来创建块格式化上下文（BFC），在使用上没有副作用。

4. 其他创建BFC方式参见上方创建BFC