Float and cssfloat of CSS

Float and cssfloat of CSS

Reference: Share: float floating in CSS

I. Initial Design of float

To achieve the effect of text wrapping

Package: BFC (Block-level formatting context)

Destruction: the container is damaged, and the parent element height collapsed (standard,

Ii. Clear floating (IMPACT)

1: method 1, insert clear: both at the bottom

Clear: Bottom of html block horizontal element

Css after pseudo element

 

2: Method 2: BFC/haylayout

3: clear overlaps with margin.

3. Floating and Fluid layout

Minimize the use of flaot for Brick layout, floating for Fluid layout

4. float compatibility
What is the role of css float?

If no floating is defined, the content of each div is arranged from top to bottom on the page.
If a div defines float: left, the div will appear at the leftmost position under the upper-layer div, which is of the same level as the div, however, the div column after it will be displayed on its right.
Similarly, if float: right is defined, this div will appear at the rightmost position under the upper div, which is of the same level as it, however, the div column before it is displayed on its left.

Two-or multi-column page layout will be used.

Float floating whereabouts in CSS

Add a parent DIV to the three Divs,
Define the width of the parent DIV as the sum of the total width of the three Divs,
No matter how it changes, it will not fall.
<Div>
<Div> </div>
</Div>