BFC块级格式化上下文(Block formatting context)独立渲染区域
- 同一个BFC的2个相邻元素在垂直方向上的margin会发生合并。
- 4种情况会形成BFC渲染区域（形成BFC之后父元素必须包含浮动子元素）
- float不是none
- position的值不是static或者relative
- display的值是inlin-block,table-cell,flex,table-caption,inline-flex
- overflow不是visible
防止父元素高度坍塌
- 设置父元素 overflow: hidden => 该属性会强制要求父元素包裹所有内部浮动元素，以及所有元素的margin范围 缺点：超过父元素的子元素会被隐藏
- 在父元素内最后加一个空子元素，并设置style='clear：both' =>利用该属性和父元素必须包含非浮动元素的原理 缺点：多了个多余的元素
- 父元素也设置浮动 脱离 文档流 缺点：后面的元素往上移了（可设置该上移元素clear:both）
- 在父元素末尾设置伪元素 clear：both => 父元素：：after{ content:'', clear: 'both', display:'table', height:0}
