开场一句话
所谓的BFC你可以把它看做是“井水不犯河水”,也就是说我们有两个元素它们各自拥有BFC,那么它们自身的任何设置的属性都不会影响到其它的元素,并且无论该元素里面的子元素怎样变化,都逃不出该父元素
利用块级上下文解决的问题
- 父元素高度塌陷
正如我们上面所说,如果我们的父元素没有开启BFC,如果子元素开启浮动,那么子元素的高度是不会将父元素撑开的,这样就会导致父元素高度塌陷,影响布局
解决办法就是给父元素开启BFC,这样他的高度就不会塌陷,就能牢牢的包裹住子元素 - 外边距重叠
一般情况下,相邻元素(兄弟姐妹)如果处于相同块格式上下文中时,它们的垂直外边距会重叠,我们就可以给它们分别设置为BFC,这样就不会发生重叠的情况 - 阻止文本换行,防止浮动元素遮挡文本
有时,浮动div周围的文本会环绕在文本周围,但是在某些情况下,这是不希望的,我们可以给文本标签设置BFC,这样文本标签就不会再去环绕浮动标签了
如何设置BFC
⑴根元素或其它包含它的元素
⑵浮动 (元素的 float 不为 none)
⑶绝对定位元素 (元素的 position 为 absolute 或 fixed)
⑷行内块 inline-blocks (元素的 display: inline-block)
⑸表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性)
⑹表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
⑺overflow 的值不为 visible的元素
⑻弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
notes1:以上的方法都或多或少因为本身的属性特性会产生副作用,酌情使用
notes2:display:flow-root时css新增的专门用来设置BFC的属性,但兼容性较差,酌情使用