Learn about floating and BFC collation and floating bfc collation

Learn about floating and BFC collation and floating bfc collation
This is my understanding and arrangement after learning. If you have any errors or questions, please correct them and I will keep updating them!

 

Document Stream concept:In html, block elements occupy a single row by default, arranged from top to bottom, that is, the Document Stream we are talking about;

Concepts of Document Stream separation:Element A defines the float attribute, and then it will "float". The original occupied space is occupied by Element B;

If the floating element A overlaps with the B element, the floating element A overwrites the B element;

Floating elements have the characteristics of inline elements. They do not occupy a single row, but are adjacent floating elements. The first element has the left attribute value at the far left and the first element has the right attribute value at the far right;

When multiple floating elements cannot fit in a row, a new line is wrapped;

 

Floating will bring about various layout problems, mainly because the parent container collapsed (the child element is outside the parent element and affects the layout later), there are various solutions, clear float using the clear attribute or form a BFC for the parent container;

1. clear floating with clear: both

Create an emptyNon-floatingDiv(Inline elements are not allowed)And assign the property clear: both;

In practical applications, we use the following pseudo elements: add the after pseudo elements to the parent container to clear the float, define a clearfix class, and then add a: after pseudo element to it, it adds an invisible block element at the end of the content of the parent container. We define clear: both;

/* Clear floating */. clearfix: after {content: ''; display: block; height: 0; clear: both; font-size: 0; visibility: hidden ;}. clearfix {/* triggers hasLayout, which involves the knowledge of Internet Explorer hack */zoom: 1 ;}

 

2. The parent container forms BFC to solve the collapse problem caused by child element floating in the parent container.

The BFC element feature is that no matter what the internal layout is, it will not affect the external layout.

 How to trigger BFC?

• Float value: left \ right
• The overflow value is auto \ scroll \ hidden.
• The display value is table-cell \ table-captain \ inline-block.
• The position value is absolute or fixed.

We can add these attributes to the parent container to form a BFC to achieve "clear" floating (including floating );

When the float attribute is set for div, the inline-block feature is generated and the entire line is not occupied;

Position: absolute disconnects the parent container from the document stream. Although it serves the purpose, the location of the parent container becomes a problem;

Overflow: auto and scroll sometimes have scroll bars;

Overflow;

 

Finally, Master Nicolas Gallagher provides a simpler method, using display: table;

. Clearfix: before,/*: before processes the upper and lower overlaps of margin */. clearfix: after {content: ""; display: table ;}. clearfix: after {clear: both ;}. clearfix {zoom: 1 ;}

Here: before, which is used to process the upper and lower overlaps of margin;

 

3. margin overlap

The upper and lower divs are granted with margin-bottom: 20px, and the lower is given with margin-top: 10px. What is the spacing between the two divs?

The distance between the two divs is 20 PX. Because of the overlap of margin, the distance between the two divs is large;

The above is about the upper and lower Divs. What if one div is in another div? The same is true. It only changes to top-top and bottom-bottom;

Two Adjacent Elements and nested elements overlap as long as they are not blocked;

Margin overlap solution:

The upper and lower divs are generally not used in this case. When you look at it, only one of the divs is given to the margin, and there is no color. You cannot see who the divs are, I just said this is the case.

The nested div inside and outside is often used,

• We can add a barrier between them. The parent element or child element adds a transparent border: 1px solid transparent. Depending on the situation, it can be added to the upper or lower border.
• Add padding to the parent or child element: 1px. Depending on the actual situation, you can add padding to the upper or lower padding.
• Let the parent element and child element not be in the same BFC, which triggers the BFC for them as needed;