1. 伪元素清楚浮动
2. clear属性清浮
3. overflow: hidden;
4. position: absolute;
position: absolute能清楚浮动？ 我怎么没用过？ 当然可以原里同样是BFC;
虽然清楚了浮动 但是position: absolute让爹爹脱离了文档流！
5. BFC究竟是什么？
在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域
6. 触发BFC的元素有哪些？
7. BFC可以阻止元素被浮动元素覆盖
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。它与普通的块框类似，但不同之处在于
1. 可以阻止元素被浮动元素覆盖
<说明>通过改变内容为BFC背景为红色的盒子的属性值，使其成为BFC，以此阻止被绿色的浮动盒子覆盖
没有BFC
触发BFC
8. 解决margin塌陷
这是什么原因？ 文档是这么说的w3c(不要看了都是英文猜你也看不懂); 看下面；
大概意思就是，你和你爹离得太近了，你要去找妹子，不能让你爹看到，你爹看到能不和你去吗！！ 你们之间要有padding，border， 或者其他元素做间隔。 如果没有爹爹就跟定你了。
我要去找妹子， 不能带着我爹去吧！！！
怎么甩掉我爹？ 使用BFC， 哪些属性会触发BFC，快去上面看看，不然没办法找妹子了。
还有另外三种方式：
- 给父盒子添加border
- 给父盒子添加padding-top
- 给子元素的前面添加一个兄弟元素属性为
:
content:""; overflow:hidden;
marign塌陷在实际项目中导致难调试的bug!!!
没有margin 和 padding 为什么没有顶上去呢? 这就是margin塌陷？ 让我们看下form的子盒子！！
竟然有个margin， 原因就是他和他爸爸的距离太近了！ 他爸爸和他一起下来了! 怎么解决？ 当然是触发BFC, 给爸爸加个overflow: hidden;轻松搞定！
9. 解决margin重叠
属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平margin会发生重叠)。
重叠的计算方式
1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3、两个外边距一正一负时，折叠结果是两者的相加的和。
所以当两个相邻块级子元素分别属于不同的BFC时可以阻止margin重叠
思路和上面找妹子的思路一样；
记不住BFC的后果很严重
