The outer margin and BFC distance of BFC are folded.

The outer margin and BFC distance of BFC are folded.
Problem description: Set margin-bottom in the sub-element. The value of this margin-bottom does not act on the sub-element, but will be transferred to the outer div, as shown below.

<Div style = "background: red;"> the content of the parent element occupies <div style = "margin-bottom: 20px; background: blue; "> contents of sub-elements occupy </div> <div style =" background: yellow "> This is the content of the next line </div>

Effect

Why does this happen? The root reason is that the BFC outer margin is folded. What is the outer margin. BFC outer margin foldingThe outer margins of two adjacent boxes (maybe sibling or ancestor) can be merged into a separate outer margin. This method of combining margins is called collapse. When the margin is folded. Trigger condition: it must be a block-level box in the conventional Document Stream and be in the same BFC. They are not separated, such as padding, border, and clearance. It is adjacent in the vertical direction, adjacent situations include the following: 1. The margin-top of the element and the margin-top of the first child element in the regular Document Stream; 2. The margin-bottom of the highly automatic element and the last one margin-bottom 3 in the normal document flow, margin-bottom of the element, margin-top 4 of the element, margin-top of the element, and margin-top of the element -bottom, however, if you do not create BFC, min-height is 0, child elements that do not contain normal document streams, height is 0, or auto. Solution: To avoid this problem, the trigger condition can be disabled to solve the problem. Therefore, we have the following solutions: 1. Add height to the parent element or set the padding value, separate them. 2: Change the parent element to a block formating context, that is, create a BFC. According to the definition of BFC, the following are optional methods: a, float: left/right B, position: absolute c, display: inline-block/table-cell d, overflow: hidden/auto