一 、BFC的解释:
块级格式化上下文,是一块独立的渲染区域,BFC的特性容器里面的元素不会影响外边元素布局,当然外部的元素也不能影响内部元素的布局
二 、原理:
①、内部的box垂直排列
②、BFC元素的垂直方向,外间距由 (margin) 决定
③、BFC内的元素和 (float) 区域的元素不会重叠
④、BFC是一个页面上的独立容器,外面的元素不会影响里面
BFC里的元素,反过来,里面的也不会影响外面的
⑤、BFC元素的高度会将浮动的元素高度计算在内
三 、触发 BFC:
①、浮动元素 float 除 none 以外的值 float:leat / right
②、定位元素 position (absolute、fixed)
③、display 以下其中之一的值,inline-block、table-cell、table-caption
④、overflow 除了 visibility 以外的值 (hidden、auto、scroll)
四 、使用场景解决了什么问题?
① 、自适应两栏布局
② 、margin 的重合
③ 、清除浮动
④ 、margin 的紧急拖拽