bfc:块级格式化上下文 ,是一个有特殊功能的容器
解析bfc区域的规则(特殊功能): 1、bfc内部元素从上往下排列,一个挨着一个 2、元素的左外边距挨着bfc区域的左边框 3、垂直摆放的元素边距由margin决定,同属于同一个bfc区域的元素垂直margin会合并 4、bfc区域和float元素不会重叠(特殊情况position) 5、bfc就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素 6、计算bfc的高度时,浮动元素也参与计算
bfc触发规则: 1、html(根元素)是最大的bfc区域 2、position为absolute、fixed 3、display为
inline-block table-cell table-caption flex inline-flex
4、overflow不为visible 5、float不为none
bfc应用:
1、两列布局,三列布局 2、清除高度塌陷 3、使垂直方向的外边距不合并(父子关系)
|