Several ways to clear floating CSS_html/css_WEB-ITnose

First way:

Because the floating box is not in the normal document flow, it does not occupy space. Such as the following code:

.news {

background-color: gray;

border: 1px solid black;

}

.news img {

float:left;

}

.news p {

float:right;

}

　

Some text

But because the floating element is out of the document flow, the div surrounding the image and text does not occupy space. How to make the surrounding element visually surround the floating element? Clear needs to be applied somewhere on this element. Unfortunately there is no element to clean in this case, so add an empty element below the last paragraph and clean it.

Add:

.clear {clear:both}

　...

This is the first way to clean up floats, but this method adds meaningless tags.

The second way

is not to clean up the floating text and images, but to select the floating container div:

.news {

background- color:gray;

border:solid 1px black;

float:left; }

...

But with Elements at the same level as the div will be affected.

The third way

is to use the overflow attribute. Applying the overflow attribute with a value of hidden or auto has a useful side effect, which automatically cleans any contained floating elements:

.news {

background-color:gray;

Border:solid 1px black; , use the :after pseudo-class and content declaration to add new content at the end of the specified existing content:

.clear:after { 　content: ".";

height:0;

visibility: hidden;

display: block;

clear: both; ;div class="news clear">

...

This method works in most modern browsers, Taobao homepage also uses this method to clear floats, but it does not work in IE6 and lower versions. The following hack is required under IE6:

.clear {

　display:inline-block;

}

* html .clear {height:1%;}

.clear {display:block;}

Others: http://my.oschina.net/leipeng/blog/221125

The article is excerpted from: The Road to the Front End