About triggering BFC in CSS

I. Definition of BFC

BFC (blocks formatting context) Literal translation is "block-level formatting contexts." It is an independent rendering area, with only block-level box involved, which prescribes how the inner block-level box is laid out and has nothing to do with the outside of the area.

Second, BFC layout rules:
1, BFC Layout rules:
(1) The inner box will be placed in a vertical direction, one after the other.
(2) The distance of box's vertical direction is decided by margin. The margin of the two adjacent box belonging to the same BFC will overlap.
(3) The left side of each element's margin box, in contact with the left side of the containing block border box (for formatting from left to right, otherwise). This is true even if there is a float.
(4) The BFC area does not overlap with float box.
(5) BFC is a separate isolated container on the page, and the child elements inside the container do not affect the outside element. The opposite is true.
(6) When calculating the height of the BFC, the floating element is also involved in the calculation


what elements will generate BFC?
root element
Float property is not none
Position for absolute or fixed
Display for Inline-block, Table-cell, Table-caption, Flex, Inline-flex
Overflow not for visible


--------------------------------------------------------------------------------------------------------------
Make a sidebar but it's included.

<span style= "FONT-SIZE:18PX;" ><div class= "Aside" ></div>
<div class= "main" ></div>


. aside {
            width:100px;
            height:150px;
            Float:left;
            Background: #f66;
        Main {
            height:200px;
            Background: #fcc;
        } </span>

---------------------------------------------------------------------------------------------------------------
Is there a problem?
--Departure BFC

. main {
            height:200px;
            Background: #fcc;
            Overflow:hidden;
        }

--------------------------------------------------------------------------------------------------------------
Classic Top margin overlap problem
Experiment 2:

. main{
            Background-color:darkgrey;
            width:700px
        }
. first{
            margin-top:100px;
            width:50px;
            height:50px;
            Background-color: #000000;
        second{
            width:50px;
            height:50px;
            Background-color:blue;
        }

<div class= "main" >
    <div class= "a" ></div>
    <div class= "second" ></div>
</div>

margin-top:100px---What's the difference between adding and not adding------------BFC area does not overlap float box with main trigger BFC


Experiment 3: Affect other elements

. main{
            Background-color:darkgrey;
            width:700px
        }
        . first{
            width:50px;
            height:50px;
            Background-color: #000000;
        second{
            width:50px;
            height:50px;
            Background-color:blue;
            margin-left:800px;
        }

When we give the elements inside the main set too much value of 800px, it is bound to impress the things outside
This does not happen when we set the BFC-------------------BFC is a separate isolated container on the page, and the child elements inside the container do not affect the outside elements.


Experiment:

. box {width:210px;border:1px solid #000; float:left;}
        . img {width:100px;height:100px;background: #696; float:left;}
        . info {background: #ccc; color: #fff;}
<div class= "box" >
    <div class= "img" >image</div>
    <p class= "info" >hello >
</div>

What happens when the text gets more.
We find that words surround---it's sad.
At this point, we can leave our BFC alone for p.
. info {background: #ccc; color: #fff; Overflow:hidden}

Experiment

<span style= "FONT-SIZE:18PX;" ><div class= "par" >
	<div class= "Child" ></div>
	<div class= "Child" ></div>
</div>


  par {
            border:5px solid #fcc;
            width:300px
        }
   . Child {
            border:5px solid #f66;
            width:100px;
            height:100px;
            Float:left;
       } </span>

What happened. The element after float does not open our box, and our principle, when calculating the height of the BFC, the floating element also participates in the calculation

. par {
            border:5px solid #fcc;
            width:300px;
            Overflow:hidden;
        }

Trigger BFC
Case:

<span style= "FONT-SIZE:18PX;" >  p {
            color: #f55;
            Background: #fcc;
            width:200px;
            line-height:100px;
            Text-align:center;
            margin:100px;
        }
       
<p>Haha</p>
<p>Hehe</p></span>

There is a problem, BFC inside the element margin overlapping

<span style= "FONT-SIZE:18PX;" ><p>Haha</p>
<div class= "wrap" >
<p>Hehe</p>
</div>

 . Wrap {
            overflow:hidden;
        } </span>