清除浮动、BFC规范

今天天气不是很好，上网刷新闻时，突然想起页面布局里面浮动的相关知识，故有了本文。

**

1. BFC规范

**
BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之，外面的元素也不会影响容器里面的元素，也就是形成了一个独立的渲染区域。
Q1：如何创建BFC？
方法1：float的值不是none;
方法2：position的值不是static或者relative，也就是position的值是fixed或者absolute；
方法3：display的值是inline-block、flex或者inline-flex；
方法4：overflow不是visible，为 auto、scroll或者hidden，最常用的还是overflow:hidden。
Q2：BFC的布局规则
（1）内部盒子会在垂直方向，一个接一个地放置。
（2）Box垂直方向的距离由margin决定，如果属于同一个BFC的两个相邻Box的margin会发生重叠。
（3）每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
（4）BFC的区域不会与float box重叠。
（5）计算BFC的高度时，浮动元素也参与计算。
Q3：形成BFC的作用?
（1）形成独立的渲染区域；
（2）取消盒子的margin塌陷问题；
（3）阻止元素被浮动元素覆盖。

2. 清除浮动

页面的浮动一定要封闭在一个盒子中，否则就会对页面后续的元素产生影响。
清除浮动方法大体上有四种：

1. 让内部有浮动的盒子形成BFC
   常用的方法是overflow:hidden。原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。

2. 给后面的父盒子设置clear:both属性
   clear表示清除浮动对自己的影响，both表示左右浮动都清除。

3. 使用伪元素::after
   使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both。

4. 设置“隔墙”
   在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子。

<div class="box1">
   <p>test</p>
</div>
<div></div> //"隔墙"，在此盒子上设置clear:both
<div class="box2">
   <p>test</p>
</div>

最后补一个面试常出的手写clearfix吧

.clearfix:after {
	content: '';
	display: table; /* block */
	clear: both;
}
.clearfix {
	*zoom: 1 /*兼容IE低版本*/
}

纠结:after还是::after 请移步至此
本文是一位仍在学习路上的中国青年随手而作，有错误欢迎指正，期待与诸位一起学习进步~