Only the key points are given, and the specific effects are not given too many demonstrations. The real thing can only be remembered by trying it yourself.
BFC
BFC trigger:
1.position:absolute/fixed
2.float:left/right
3.display:inline-block
4.overflow:hidden/scroll
Regarding the trigger method, there are also some trigger methods such as table-cell, but they are rarely used.
BFC Features:
1. Elements that trigger BFC, internal elements will not affect other external elements
2. BFC can see floating elements (including internal elements), and text elements can also see floating elements
(Mentioning float, the element with float is set, block-level elements will ignore it, but from the above, only BFC will not ignore it)
Margin collapse:
Set the two structures to be nested so that the margin-top of the parent element and the margin-top of the child element will overlap and take the maximum value.
But this maximum value is displayed by the margin-top of the parent element, and the margin of the child element is 0
The effect is as follows
html structure
css structure
Effect
Solution:
1. The parent element sets the border
2. The parent element triggers bfc
The normal effect is shown as follows
above