Summary-illustration and BFC illustration

Summary-illustration and BFC illustration

View me(Success. Fail) fail.Figure 1: Problem Diagram 2: Code diagram 3: solution Diagram

View me◔ ‸ ◔QuestionQuestion DiagramAndThe difference between solving the graph: The line of code with the yellow arrow does not have

 

BFC Definition

The BFC (Block formatting context) literal translation is "Block-level formatting context ". It is an independent rendering area with only Block-level box involved. It specifies how the internal Block-level Box is laid out and has nothing to do with the outside of the area.

BFC layout rules BFC creation method BFC solves problems

1. The maigin-top parent element and the margin-top child element collapse:

☞"The vertical distance of a Box is determined by margin. The margin of two adjacent boxes belonging to the same BFC overlaps."Rule 2: Cause
PS: You can also set border or padding.

2. Brother 1margin-BottomWith brother 2margin-TopCollapse:

☞"The vertical distance of a Box is determined by margin. The margin of two adjacent boxes belonging to the same BFC overlaps."Rule 2: Cause

3. Child element float-> parent element height collapse:

☞"When calculating the BFC height, floating elements are also involved in calculation."Rule 6: Solution

4. Brother 1float-> brother 2:

☞"The left side of the margin box of each element is in contact with the left side of the border box containing the block, even if there is a floating."Rule 3: Cause
☞"The BFC region does not overlap with the float box."Rule 4: Solution

Summary

☞“BFCIs an isolated independent container on the page. The child elements in the container do not affect the external elements. And vice versa."Rule 5

BecauseBFCThe internal and external elements will never affect each other. Therefore, whenBFCWhen there is a floating outside, it should not be affectedBFCInternal Box layout,BFCIt will narrow down without overlap with the floating. Similarly, whenBFCWhen there is a floating inside, in order not to affect the layout of external elements,BFCThe calculated height includes a floating height. This is also the case for avoiding the overlap of margin.

Reference: http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html