Float and clear float, float clear float

Float and clear float, float clear float

Float and clear float

 

I. float: The main purpose is to achieve the effect of text wrapping.

It also became the easiest way to create a multi-column layout.

 

<P> text content paragraph content </p>

 

[1] Text wrapping

P {margin: 0; border: solid 1px ;}

Img {float: left ;}

[2] create multi-Column Layout

P {margin: 0; border: solid 1px; width: 200px; float: left ;}

Img {float: left ;}

 

2. The floating element is out of the Document Stream, and its parent element cannot be seen, because it will not be surrounded, and the child element will have a height, and the parent element will not be supported, this is not what we want,

There are three solutions available below. Please check the situation and make appropriate use of them:

<Section>

<P> This is a paragraph. This is a paragraph. </p>

</Section>

<Footer> This is the bottom, this is the bottom </footer>

 

Section, footer {border: solid 1px ;}

Img {float: left ;}

 

[1] add overflow: hidden for the parent element; force the parent element to enclose the floating Element

The actual purpose of this statement is to prevent the parent element from being opened by a large amount of content. After the overflow: hidden application is applied, the parent element remains in the specified width, and the ultra-large child content is cut off by the container.

In addition, overflow: hidden has another function, that is, it can reliably force the parent element to include its floating child element.

It cannot be used on top-level elements in the drop-down menu. Otherwise, the drop-down menu as its sub-elements will not be displayed.

 

[2] float the parent element at the same time. The width of 100% is the same as the width of the browser, and the footer settings are cleared, so that footer will not squeeze to the side of the section.

Section {border: solid 1px; float: left; width: 100%}

Footer {border: solid 1px; clear: left}

Img {float: left ;}

It cannot be used for elements that are automatically centered by the outer margin. Otherwise, the data is not centered.

[3] add non-floating clear elements (pseudo elements)

. Clearfix: after {

Content :"";

Display: block;

Height: 0

Visibility: hidden;

Clear: both

}

 

3. How to clear a group without a parent element (img p is a group without a parent element)

<Section>

<P class = "clearfix"> text content paragraph content </p>

<P class = "clearfix"> text content paragraph content </p>

<P class = "clearfix"> text content paragraph content </p>

</Section>

 

. Clearfix: after {

Content :"";

Display: block;

Height: 0

Visibility: hidden;

Clear: both

}