近期总结回顾前端知识，对清楚浮动和BFC有了更深刻更细致的理解，先把总结的文档放在这里，后面有时间再增加解释。
如有疑问或有误解的地方，欢迎评论指正！
格式化上下文
块级格式化上下文（Block Formatting Context，BFC）
概念
BFC 属于普通流，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
BFC的特性
- 清除内部浮动：BFC元素内部浮动元素的高度也会撑开BFC盒子的高度，但是不能解决内部浮动元素盖住同级元素的问题
- 清除外部浮动：BFC元素不会被外层同级浮动元素盖住。（利用这一点可以实现一侧固定，一侧自适应布局）
- 防止外边距重叠
创建BFC
- 文档的根元素（
<html>）。 - 浮动元素（即
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），在使用上没有副作用。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。