一、BFC是什么

BFC全称 block format context -- 块级格式化上下文

一块独立的css渲染区域，内部元素的渲染不会影响边界以外的元素

为什么要bfc：有一些问题需要bfc去解决

二、触发了BFC有怎样的特性

1. 内部的box在垂直方向上会一个接一个的放置。
2. 由垂直方向上由margin决定，但是同时属于同一个bfc区域下的两个相邻的box盒子之间的margin会重叠，或者是左右排列左右的间距由margin决定的以大的margin为准。
3. 每个元素的左边外边距会和包含块的左边界想接触(bfc中元素不会超出)但是absolute定位是特例绝对定位。
4. bfc区域不会和float元素重叠。
5. 当计算高度时，浮动子元素也需要进行计算
6. bfc就是一个独立的渲染区域，所以它的子元素不会影响另外的bfc的区域子元素。

三、怎么去触发BFC

1.根元素（默认情况下只有根元素，即body一个块级上下文） body默认就是bfc
2.overflow：hidden auto scroll 超出隐藏
3.display 为flex -弹性布局 inline-block-变为行内块元素，table-cell - 一个表格单元格显示，table-caption -一个表格标题显示其中之一
4.定位元素 position fixed-固定定位 absolute-绝对定位
5. 浮动元素 float:left/right none除外

四、BFC能解决那些问题

1.利用BFC避免兄弟margin上下重叠

这是没有用BFC导致margin上下重叠 例如:

<head>
    <title>bfc</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            color: orange;
            background-color: pink;
            width: 200px;
            line-height: 100px;
            text-align: center;
            margin: 30px;
        }
    </style>
</head>

<body>
    <p>盒子1</p>
    <div>
        <p>盒子2</p>
    </div>
</body>

触发BFC之后 例如:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            color: orange;
            background-color: pink;
            width: 200px;
            line-height: 100px;
            text-align: center;
            margin: 30px;
        }

        div{
            overflow: hidden;
        }
    </style>

这里本人使用的是overflow属性触发的BFC使margin上下不重叠

2.清除浮动

当我们不给父节点设置高度,子节点设置浮动的时候,会发生高度塌陷,会脱离普通文档流,这个时候我们就要清除浮动

例如:

<head>
    <title>清除浮动</title>
</head>
<style>
    .top {
        border: 3px solid pink;
        width: 300px;
    }

    .box {
        border: 3px solid cyan;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="top">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

因为计算BFC的高度时，浮动元素也参与计算，所以我们给父节点添加BFC 使其清除浮动 例如:

<head>
    <title>清除浮动</title>
</head>
<style>
    .top {
        border: 3px solid pink;
        width: 300px;
        display: flex;
    }

    .box {
        border: 3px solid cyan;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="top">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

这里用的是flex 弹性布局触发BFC清除浮动 三、自适应两栏布局 每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 例如:

<head>
    <title>自适应两栏布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
    .left {
        height: 150px;
        float: left;
        background: pink;
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
    .right {
        height: 300px;
        background: cyan;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

因为BFC的区域不会与float box重叠，所以我们让right单独成为一个BFC 解决父子margin外边距塌陷问题 例如:

<head>
    <title>自适应两栏布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
    }
    .left {
        width: 300px;
        height: 150px;
        float: left;
        background: pink;
        text-align: center;
        line-height: 150px;
        font-size: 20px;

    }
    .right {
        height: 300px;
        background: cyan;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
        overflow: hidden;
    }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

五、总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的元素也影响不到里面。

因为BFC内部的元素和外部的元素绝对不会互相影响，所以当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。当BFC内部有浮动时，为了不影响外部元素的布局，BFC在计算高度的时候会将浮动的高度计算进来，避免margin重叠。