Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to cleverly use CSS's clear:both to clear floats". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to cleverly use CSS's clear:both to clear floats".

We use div+css or xhtml+css in making web pages will encounter some very strange situations, obviously the layout is correct, but the whole picture is chaotic, sometimes it looks very normal under IE6, when we look at it under ie7 or Firefox, it is a mess, no matter how we calculate it, we just can't correct the typesetting. In fact, all this is caused by floating, that is, float in css. To solve the situation, you need to use clear:both.

The CSS manual states that the value of this attribute indicates that edges with floating objects are not allowed. This property is used to control the physical location of the float property in the document stream.

When the property is set float (floating), its physical location has been separated from the document stream, but most of the time we want the document stream to recognize float (floating), or we want the elements after float (floating) not to be affected by float (floating). At this time, we need to use clear:both; to clear.

Program code:

This is the first column.

This is the second column.

This is the third column.

If you don't need to clear floats, then the third column text will be along with the first and second columns, so we'll add a clear floating clear:both to the third column.

In general, we tend to define a separate CSS style for "clear floats", such as:

Program code

.clear {

Clear:both

}

Then use it to specifically "clear floats".

However, there is also a disagreement that it can be cleared at the lower level without writing.

For example, it was fine.

Program code

This is the first column.

This is the second column.

This is the third column.

It has to be integrated.

Program code

This is the first column.

This is the second column.

This is the third column.

It seems that there is really no need to write about this.

However, it is clear that there is another common situation in web design:

Program code

# main {background-color:#3399CC;width:600px;padding:20px;}

# sidebar {background-color:#FF6600;float:left;width:130px;}

# container {float:right;width:420px;background-color:#FFFF33;}

The first paragraph

The second paragraph

The third paragraph

This page tests that it works just right under IE: there are red and yellow blocks inside the blue block, and there is a third paragraph of text below the blue block.

But that's not how FF works. We can't just want to clean up at the next layer to finish our work. We must "clean up" the floating element before the tag is closed.

Program code

# main {background-color:#3399CC;width:600px;padding:20px;}

# sidebar {background-color:#FF6600;float:left;width:130px;}

# container {float:right;width:420px;background-color:#FFFF33;}

.clear {clear:both;}

The first paragraph

The second paragraph

The third paragraph

For the height change of IE and FF caused by excessive tagging, the solution is as follows:

Program code

Clear {

Clear:both

Height:1px

Margin-top:-1px

Overflow:hidden

}

Program code

# main {background-color:#3399CC;width:600px;padding:20px;}

# sidebar {background-color:#FF6600;float:left;width:130px;}

# container {float:right;width:420px;background-color:#FFFF33;}

.clear {clear:both;height:1px;margin-top:-1px;overflow:hidden;}

The first paragraph

The second paragraph

Thank you for your reading, the above is the content of "how to skillfully use CSS's clear:both to clear the float". After the study of this article, I believe you have a deeper understanding of how to skillfully use CSS's clear:both to clear the float, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.