overflow 与 BFC

一. 谈谈 overflow

1. 父元素设置 overflow:hidden; 清除浮动.
   如果一个元素 div 没有设置高度, 它的子元素浮动, 那么默认父元素的高度塌缩, 给父元素设置 overflow 为 hidden / auto / scroll 这三个值之一都能使父元素正确包裹子元素, 不过 scroll 属性会产生滚动条, 一般不怎么用.

.container {
  overflow:hidden;
  border:1px solid black;
}
.box1 {
  float:left;
  width:100px;
  height:100px;
  background:green;
}
<div class="container">
    <div class="box1"></div>
</div>

2. 当这个浮动元素后面跟一个正常定位的同级元素, 浮动元素会附在这个元素之上, 给这个元素一个 overflow:hidden; 等任何 overflow 不为 visible 的值, 即可和浮动元素并排显示.

.box2{
  overflow:auto;
  width:100px;
  height:100px;
  background:red;
}
<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

二. overflow 值不为 visible 的元素创建了 BFC

1. 哪些情况会创建 BFC:

1. 根元素 HTML;
2. 浮动元素 float 不为 none 的;
3. 绝对定位元素 position 为 absolute / fixed 的;
4. display 不为 block 的, 如 flex, inline-flex, inline-block, table-cell, table-caption 等;
5. overflow 不为 visible 的.

2. 一个 BFC 里的元素会从上到下依次排列, 相邻垂直方向的 margin 会合并. 根元素, 水平外边距不会合并. 详见 margin 的折叠
3. 在一个 BFC 里, 创建这个 BFC 的元素会包含它的所有子元素, 但是不包含子元素中另起炉灶独自又创建了 BFC 的元素. (这句话很晦涩, 有问题.)
4. 父元素创建了 BFC, 将包含浮动元素.