Introduction to floating and clearing of CSS pages

First, float: The main purpose is to achieve the text wrap the image effect.

Also becomes the easiest way to create a multiple-column layout.

<p> text content Paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content </p>

"1" Text wrap picture

P {margin:0;border:solid1px;} img {float:left;}

"2" Create a multiple-column layout

P {margin:0;border:solid1px;width:200px;float:left;} img {float:left;}

second, the floating element out of the document stream, its parent element can not see him, because it will not surround him, there will be child elements have a height, and the parent element will not be propped up, this time is not what we want,

Here are three ways to solve, please use the appropriate situation:

<section> <p> This is a paragraph this is a paragraph this is a paragraph this is a passage this is a paragraph this is a paragraph this is a paragraph </p> </section> <footer> This is the bottom this is the bottom this is the bottom this is bottom this is bottom this is bottom this is bottom </footer>

section, footer {border:solid1px;} img {float:left;}

"1" adds Overflow:hidden to the parent element; forces the parent element to surround the floating element

The real purpose of this declaration is to prevent the parent element from being stretched out by the oversized content, and after applying Overflow:hidden, the parent element retains its set width, and the oversized child content is clipped by the container.

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

cannot be used on a top-level element that uses a drop-down menu, otherwise the Drop-down menu as its child element is not displayed.

"2" at the same time floating the parent element, width 100% and browser width of the same width, to footer set clear floating, so that footer will not squeeze next to the section to

Section {border:solid1px;float:left;width:100%} Footer {Border:solid1px;clear:left} img {float:left;}

You cannot use an element that is automatically centered on the outside margin. Otherwise no longer centered.

"3" Add a non floating purge element (pseudo element)

. clearfix:after { Content: ""; Display:block; height:0 Visibility:hidden; Clear:both }

Third, when there is no parent element, how to Clear (IMG p as a group, no parent element)

<section>    <pclass= "Clearfix" > Text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content </p> <pclass=" Clearfix "> Text content paragraph content text content paragraph content paragraph content text   This content paragraph content text content paragraph content </p> " <pclass= "Clearfix" > Text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content </p> &L T;/section>

Clea Rfix:after { content: ""; Display:block; height:0    Visibility:hidden; clear:both }