First look at some properties of floating

Floats take elements out of the document flow

Floating elements can set width and height. In CSS, any element can be floating, and floating elements will generate a block-level box, regardless of the element itself.

If no height is specified for the floating element, it will take the height of the content as its own height and be as narrow as possible.

Floating elements cannot extend the height of the parent element because they are out of the document flow.

Floaters are taken out of the document flow, so other normal block boxes in the document will behave as if the floater doesn't exist

A float can be moved left and right until its outer border touches the edge of its wrapping box or another float box

Floating is mostly used for wrapping pictures and texts. Combined with divs containing pictures to set floats, pictures will float, but paragraphs will not float, and the effect is that text wraps around pictures.

floating effect

insert image description here

clear float method

Set the height of the parent element, (greater than the child element)

insert image description here
But in web design, we generally do not directly set the height of the parent element, but use the method of opening the height of the child element , so there are limitations.

2. Add the overflow:hidden|auto attribute to the parent element.

There are three attributes in overflow here, which are auto|hidden|visible. Auto or hidden can be used, but visible must not be used, and the effect of clearing floating cannot be achieved.

3. Add an empty tag to the same level, set clear: both

.outer{color:white;border:1px solid blue;background:grey;margin:50px auto;}
            .div1{width:80px;height:80px;background:red;float:left;}
            .div2{width:80px;height:80px;background:purple;float:left;}
            .div3{width:80px;height:80px;background:green;float:left;}

.null{clear: both;zoom:1;}

The effect is of course to remove the floating
insert image description here

Use the :after pseudo-class to act on the parent element

.outer{color:white;border:1px solid blue;background:grey;margin:50px auto;zoom: 1;}
            .div1{width:80px;height:80px;background:red;float:left;}
            .div2{width:80px;height:80px;background:purple;float:left;}
            .div3{width:80px;height:80px;background:green;float:left;}

.outer:after{content: ""; display:block;overflow:hidden;clear: both;}

Principles of Floating Element Layout

The floating element will float left to right according to the attribute value, and the floating element will break away from the normal document flow and enter the floating flow. Floated elements within a floating flow can move left and right until the outer edge hits the containing block or other floating elements. Causes block-level elements to ignore floated elements and inline elements to wrap around floated elements.

Common initial web page layouts are: standard flow, floating, and positioning.

standard stream

Simply put, it is ordinary flow, regular flow, and placeholder;

float

Float out of the standard stream, occupying no space

position:

It is separated from the standard stream and does not occupy space.

CSS clear float