1. The meaning of BFC:
Block Formatting Contexts (BFC) block-level element formatting contexts
It determines how a block-level element lays out its content, as well as its relationship to and interrelationships with other elements
block-level element: parent (is a block element)
content: child element (is a block element)
Other elements: sibling elements at the same level as the content
Interaction: elements in the BFC will not affect the elements outside
2. Trigger condition:
The way to trigger BFC (click any one)
1. The value of float is not none
2. The value of overflow is not visible
3. The value of display is one of table-cell, tabble-caption and inline-block
4. The value of position is not static or any of relative
3. The difference between FBC layout and ordinary document flow layout
Normal document flow layout rules
1. Floating elements are not calculated by their parent height
2. Non-floating elements will override the position of floating elements
3.margin will be passed to the parent
4. The upper and lower margins of two adjacent elements will overlap
BFC layout rules
1. Floating elements will be calculated height by the parent (the parent triggers the BFC)
2. Non-floating elements will not cover the floating element position (non-floating elements trigger BFC)
3.margin is not passed to the parent (the parent triggers the BFC)
4. The upper and lower margins of two adjacent elements will overlap (add a parent to one of the elements, and then let his parent trigger BFC)
<divstyle="border:1px solid #f00;overflow:hidden; "><divstyle="width:100px; height:100px; background:green;float:left;">kaivon</div></div><divstyle="border:1px solid #f00;margin-top:100px; "><divstyle="width:100px; height:100px;background:green;float:left;">kaivon1</div><divstyle="width:100px; height:100px;background:red;overflow:hidden;">kaivon2</div></div><divstyle="background:blue;margin-top:100px;overflow:hidden;"><divstyle="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div><divstyle="width:100px; height:100px; background:red;">kaivon2</div></div><divstyle="margin-top:100px; border:1px solid red;"><divstyle="width:100px; height:100px; background:green;margin:100px0;">kaivon1</div><divstyle="overflow:hidden;"><divstyle="width:100px; height:100px; background:red;margin:100px0;">kaivon2</div></div></div>
1. The meaning of BFC:
Block Formatting Contexts (BFC) block-level element formatting contexts
It determines how a block-level element lays out its content, as well as its relationship to and interrelationships with other elements
block-level element: parent (is a block element)
content: child element (is a block element)
Other elements: sibling elements at the same level as the content
Interaction: elements in the BFC will not affect the elements outside
2. Trigger condition:
The way to trigger BFC (click any one)
1. The value of float is not none
2. The value of overflow is not visible
3. The value of display is one of table-cell, tabble-caption and inline-block
4. The value of position is not static or any of relative
3. The difference between FBC layout and ordinary document flow layout
Normal document flow layout rules
1. Floating elements are not calculated by their parent height
2. Non-floating elements will override the position of floating elements
3.margin will be passed to the parent
4. The upper and lower margins of two adjacent elements will overlap
BFC layout rules
1. Floating elements will be calculated height by the parent (the parent triggers the BFC)
2. Non-floating elements will not cover the floating element position (non-floating elements trigger BFC)
3.margin is not passed to the parent (the parent triggers the BFC)
4. The upper and lower margins of two adjacent elements will overlap (add a parent to one of the elements, and then let his parent trigger BFC)
<divstyle="border:1px solid #f00;overflow:hidden; "><divstyle="width:100px; height:100px; background:green;float:left;">kaivon</div></div><divstyle="border:1px solid #f00;margin-top:100px; "><divstyle="width:100px; height:100px;background:green;float:left;">kaivon1</div><divstyle="width:100px; height:100px;background:red;overflow:hidden;">kaivon2</div></div><divstyle="background:blue;margin-top:100px;overflow:hidden;"><divstyle="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div><divstyle="width:100px; height:100px; background:red;">kaivon2</div></div><divstyle="margin-top:100px; border:1px solid red;"><divstyle="width:100px; height:100px; background:green;margin:100px0;">kaivon1</div><divstyle="overflow:hidden;"><divstyle="width:100px; height:100px; background:red;margin:100px0;">kaivon2</div></div></div>