Table of contents

1. Definition of BFC

BFC (Block Formatting Context), that is, block-level formatting context , it is a rendering area in the page, and has its own set of rendering rules,

1. The inner boxes will be placed one after another in the vertical direction.
2. For the same BFC, the margins of two adjacent boxes will overlap, regardless of the direction.
3. The left margin of each element touches the left border of the containing block (from left to right), even for floating elements
4. The area of the BFC does not overlap with the area of the element of the float
5. When calculating the height of the BFC, Floating child elements also participate in the calculation
6. BFC is an isolated independent container on the page, and the child elements inside the container will not affect the elements outside, and vice versa

BFCThe purpose is to form a space that is completely independent from the outside world, so that the internal child elements will not affect the external elements

In the page layout stage, the page layout is often confused due to BFC problems, such as the problem of merging margins, the height of elements is lost, and the two-column layout does not achieve self-adaptation.

2. Conditions to trigger BFC

1. Root element, that is, HTML element
2. Floating element: float value is left, right
3.overflow value is not visible, it is auto, scroll, hidden
4.display value is all values except none, inline-block, inltable-cell, table-caption, table, inline-table, flex, inline-flex, grid, inline-grid 5. The
value of position is absolute or fixed

3. Margin merge problem

1. Brother-level margin merging
       Reasons for merging: Set a lower margin for sibling elements and set an upper margin at the same time, resulting in margin merging and merging
       solutions:
           1. Only set margins for one of the sibling elements
           2. Set the lower margin Turn on BFC for the outer margin
               1.display:inline-blick/flex
               2.position:absolute/fixed
               3.float:left
           3. Set a parent element for the upper sibling element and enable BFC
               overflow hidden/auto for the parent element
2. Parent-child level outer margin The reason for merging and merging: set a margin merging solution
       in the same direction for both parent and child elements at the same time Solution:            1. Set the padding attribute for the parent element            2. Set the border border for the parent element

4. Application Scenarios of BFC

1. Avoid overlapping margins

When the sibling box is set and a bottom margin is set for the sibling element and a top margin is set at the same time, a margin merge occurs

        <style>
            div:first-child {
                width: 100px;
                height: 100px;
                background: red;
                margin-bottom: 10px;
            }
            div:last-child {
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
            }
        </style>
        
        <div class="cube"></div>
        <div class="cube"></div>

There is a problem of overlapping margins. Originally, the height of the body should be 230 (the height of the first box is 100 + the margin of the first box is 20 + the height of the second box is 100 + the margin of the second box is 10), which needs to be solved at this time For this kind of problem, you need to open BFC

When opening the BFC for the second box div,

            div:last-child {
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
                display: inline-block;
                /* position: absolute; */
                /* float: left; */
            }

The following situation will occur. Using these three methods to open BFC will add new styles and borders . At this time, the height of the body is 234px, which is not recommended.

Best method: When we give the first box a parent box and trigger the parent box to generate a BFC, then the two divs do not belong to the same BFC, and there will be no margin overlap problem.

         <style>
            .cube {
                width: 100px;
                height: 100px;
                background-color: red;
                margin-bottom: 10px;
            }
            .cube1:last-child {
                width: 100px;
                height: 100px;
                background-color: red;
                margin-top: 20px;
            }
            .container {
                /* 开启bfc属性  */
                overflow: hidden;
            }
        </style>

        <div class="container">
            <div class="cube"></div>
        </div>
        <div class="cube1"></div>

，

2. Clear floating

        <style>
            .parent {
                border: 10px solid red;
            }
            .child {
                width: 100px;
                height: 100px;
                background-color: blue;
                /* 浮动效果 */
                float: left;
            }
        </style>

        <div class="parent">
            <div class="child"></div>
        </div>

The effect is as follows, when the height of the parent element parent is calculated, the height of the child element child is not calculated.

When we generate a BFC for the parent element, the parent element will also calculate the height of the floating child element child into it when calculating the height

            .parent {
                border: 10px solid red;
                /* 开启bfc overflow hidden auto */
                overflow: hidden;
            }

The effect of the page is as follows, normal display

But when we use other methods to generate BFC, the style will change and do not meet the requirements. The effect is as follows

3. Implement a two-column layout

Set the width on the left, adaptive on the right, and enable BFC on the right

	<style>
		.left{
			width: 300px;
			background-color: red;
			float: left;
		}
		.right{
			background-color: blue;
			/* 开启bfc */
			overflow: hidden;
		}
	</style>
    
    <div class="left">左侧定宽</div>
	<div class="right">右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
	</div>

A two-column layout is implemented and the right side is adaptive

4. Implement a three-column layout

Idea: fix the width on the left and right sides, give the left box float:left; give the right box float:right, and turn on BFC for the middle box, so as to realize the left and right fixed width, and the effect of self-adaptation in the middle

        <style>
            /* 三列布局 左侧右侧定宽 中间自适应 */
            .left,
            .right {
                width: 100px;
                height: 50px;
                background-color: red;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .center {
                height: 100px;
                background-color: blue;
                /* 开启bfc */
                overflow: hidden;
            }
        </style>
            
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>

Interviewer: Talk about your understanding of BFC and the problem of margin merging