css初入门：BFC（格式化上下文）

文章目录

• • 1、概述
  • 2、形成BFC的方式
  • 3、解决的问题
  • • 3.1 解决浮动元素令父元素高度坍塌的问题
    • 3.2 解决垂直外边距合并问题(垂直塌陷)
    • 3.3 解决包含塌陷问题

1、概述

BFC（Block Formatting Context 格式化上下文）

官方文档是这么解释的：
一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使得他的子元素与世隔绝，不会影响到外部其他元素。

可以理解为我的小弟我来管，即便是大哥来了你也只能管我，也不能管我的小弟

总结下来就是：（1）每一个BFC区域只包括其下子元素，不包括其子元素的子元素（2）每一个BFC区域都是隔离的，不受外部影响
举个例子：

<div class="box1">
    <div class="box2">div>
    <div class="box3">div>
    <div class="box4">
        <div class="box5">div>
        <div class="box6">div>
        <div class="box7">div>
    div>
div>
1
2
3
4
5
6
7
8
9

box1和box4是两个BFC区域，box1的BFC区域包括box2，box3，box4，但不包括box4下的子元素，而box4的BFC区域包括了box5，box6，box7这几个子元素，不受box1的影响。

2、形成BFC的方式

• body根元素
• 设置浮动
• 子元素设置定位absolute/fixed
• 父元素设置overflow:hidden
• 表格单元格 table-cell
• 父元素设置弹性布局flex
• 子元素设置为行内布局display:inline-block;
• 父元素设置透明边框：border:1px solid transparent;

3、解决的问题

3.1 解决浮动元素令父元素高度坍塌的问题

如图：有三个浮动div，并且他们有一个共同的父元素div。

解释：

（1）在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
（2）当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
（3）由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
通过overflow:hidden解决这个问题，如下：

3.2 解决垂直外边距合并问题(垂直塌陷)

根据上图，给两个元素都添加了margin:50px，他们之间原本应该相聚100px才对，而这里就只相聚50px，这就是外边距塌陷问题，解决就是，给这两个元素各自添加一个父元素，父元素设置overflow:hidden，如下：

3.3 解决包含塌陷问题

包含塌陷如下：

可以看到我们只给子元素设置了margin-top，但效果却体现在了父元素上，这就是包含塌陷。
有两种解决方式：方式一是给父元素添加个边框，内外边框都可以，方式二就是通过给父元素设置为BFC区域，即可解决，结果如下：