css 清除浮动 & BFC
前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
文档流的概念：html 中 block 块元素默认是单独占据一行的，从上到下排列，也就是我们说的文档流。
脱离文档流的概念：A 元素定义了 float 属性之后，就会"浮"起来，原来占据的空间由后面的 B 元素占据。
如果浮动起来的 A 元素和 B 元素发生重叠，浮动起来的 A 元素就会覆盖 B 元素。
浮动元素具有内联元素的特性，不在单独占据一行，相邻的浮动元素，最前面的具有 left 属性值的排在最左边，最前面的具有 right 属性值的排在最右边。
当多个浮动元素一排容不下时，就换行。
浮动会带来各种布局问题，主要是父容器塌陷（子元素在父元素外面，影响后面的布局），也就有各种解决方案，利用clear属性清除浮动或者使父容器形成 BFC。
利用 clear:both 清除浮动
在浮动元素后面在创建一个空的非浮动的 div(inline元素不可以)，并赋予属性 clear:both;
实际应用中我们更多采用 :after 伪元素加在父容器上来清除浮动，定义一个 clearfix 的 class，然后给它添加一个 :after 伪元素，它会在父容器的内容最后面在添加一个看不见的块元素，我们给它定义 clear:both;
/* 清除浮动 */
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
font-size: 0;
visibility: hidden;
}
.clearfix {
/*触发hasLayout,这又涉及到IE浏览器hack的知识*/
zoom: 1;
}
BFC 学习
父容器形成 BFC 可以解决父容器内部子元素浮动引起的塌陷问题。
BFC 元素特性就是不论内部怎样，都不会影响外部布局。
如何触发BFC？
- float 值为 left\right
- overflow 值为 auto | scroll | hidden
- display 值为 table-cell | table-captain | inline-block
- position 值为 absolute 或 fixed
我们可以给父容器添加这些属性形成 BFC，达到“清”浮动（包含浮动）。
div 设置 float 属性之后会产生 inline-block 特性，不会占据一整行了。
position:absolute 会使父容器脱离文档流，虽然打成了目的，但父容器的位置问题又来了。
overflow：auto | scroll 有时候会出现滚动条。
overflow：hidden 需要确定不会出现溢出裁剪，很多企业不让用 overflow，我们需灵活掌握。
最后，Nicolas Gallagher 大师提供了一种更简便的方法，用的是 display:table。
.clearfix:before, /*:before处理margin上下重叠*/
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
这里的 :before 它是来处理 margin 上下重叠的；
margin 重叠
上下两个 div，上面的赋予 margin-bottom:20px，下面的赋予 margin-top:10px，那么两个div之间的间距是多少呢？
两个 div 之间的间距是 20px，因为发生了 margin 重叠，两个值那个大，间距就是哪个。
上面说的是上下两个 div，那么一个 div 在另一个 div 中呢？情况也是一样的，会发生重叠，只是变成了 top-top，bottom-bottom 重叠。
两个相邻的元素，嵌套的元素，只要它们之间没有阻挡，就会发生 margin 重叠。
margin重叠解决方法：
上下两个 div，这种情况一般不会用到，你看效果图的时候，一般都只会给其中一个 div 赋予 margin 的，都没有颜色，你也看不出来谁是谁，上面的列子我只是说存在这个情况。
内外嵌套的 div，很多时候会见到：
- 我们可以在它们之间加个阻碍，父元素或者子元素加个透明边框 border:1px solid transparent; 视情况可以具体到上边框还是下边框
- 父元素或者子元素加个 padding:1px；视情况可以具体到上 padding 还是下 padding
- 让父元素和子元素不在同一个 BFC，视情况给它们哪个触发 BFC
