BFC模式：BFC(block formatting context）:块级格式化上下文。如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。
一、 形成 BFC 的条件
- 浮动元素，float 除 none 以外的值；
- 绝对定位和固定定位元素，position（absolute，fixed）
- display 为以下其中之一的值 inline-block，table-cell，table-caption
- overflow 除了 visible 以外的值（hidden，auto，scroll）
二、 BFC的常见作用
- 清除子元素浮动对父元素产生的影响
子元素浮动，父元素高度（由子元素撑开）便会坍塌，给父元素overflow: hidden触发 BFC 可解决问题。 - 不被同级浮动元素覆盖
一元素浮动，其兄弟元素被覆盖。 给兄弟元素加overflow: hidden可解决问题。如果不加width，那么默认宽度为除去浮动元素的宽以后所剩余的宽度。 - 阻止外边距折叠
两盒子之间的外边距会以大的为准。给其中一个盒子加一个父元素，并设置overflow：hidden产生BFC解决问题。（可以解决上下两个盒子margin重叠问题）
4、解决matgin塌陷
网友评论