理解BFC，以及学会BFC的三大应用

个人博客

B站：https://www.bilibili.com/video/BV16b411H7Pz?from=search&seid=15561187449248501943

什么是BFC

BFC的目的就是形成一个完全独立的空间，让空间中的子元素不会影响外面的元素。

如何形成BFC(触发规则）

为元素设置一些css属性

• float 不为 none
• position 不为 relative 和static
• overflow 为 auto，hidden,scroll
• display 的值为table-cell 或 inline - block

BFC的应用

解决浮动元素令元素高度塌陷的问题

假设一个页面有四个子元素，他们的高度本来是撑开父元素的高度的。当他们都设置为浮动时，会呈现高度塌陷问题如下：

原因是浮动的子元素脱离了文档流

解决高度坍塌问题有下列方法

• 这是解决方法之一就是给父元素添加属性overflow:hidden
• 还可以向父元素添加display:table-cell;
• 还可以向父元素添加display:block
• 还可以像父元素添加： position：absolute
• 还可以像父元素添加 position fixed

这些属性都能触发BFC,触发了BFC的元素就是页面上一个完全隔开的容器，容器中的元素绝对不会影响到外面的元素

当父元素的布局等规则已经固定，上面的属性不可用时，还可以用如下方法解决高度坍塌：

• 父元素也设置为浮动，使其脱离文档流（缺点是可能影响之后的元素的排列）

• 给父元素设置一个固定的高度（必须知道子元素的高度时）

• 在浮动的子元素下面添加一个空元素，并设置属性{clear:both}(会)
  

• 为浮动的最后一个子元素设置伪元素（和前一个办法）
  

解决自适应布局的问题

上图是一个两栏布局，左侧定宽，右侧自适应浏览器的变化
此方法

这时可以让左侧元素浮动，右侧元素触发BFC，就可解决此问题

解决外边距垂直方向重合的问题

先解释什么是外边距垂直重合问题：

上面有两个元素A和B，假如A的margin-bottom是20px，而B的margin-top是10px。这时A与B的真正垂直距离只有20px

这时触发BFC可以取消他们之间的相互影响：

比如可以将上面一个A元素添加一个父元素包裹，并设置overflow:hidden