Css Div layout learning (2)? Clean up Clear_html/css_WEB-ITnose

We explained the basic layout methods in the article Css Div Layout Learning (1)?Div Layout Basics. There is a clear:both; attribute in Footer and I just mentioned it in one sentence. I thought about the cleanup afterwards. There are still some things that need to be made clear. Then I will create a special article to talk about it.

It is easier to use the layout example from the previous article to illustrate the problem:

Masthead

Sidebar_a

Sidebar_b

Content

Footer

Review the Css of this layout:

#Masthead { background-color:#CCCCCC; margin-bottom:10px; } #Sidebar_a { float:left; width :25%; margin-bottom:10px; background-color:#3399CC; } #Sidebar_b { float:right; width:25%; margin-bottom:10px; background-color:#33ff33; } #Content { margin-bottom :10px; height:150px; background-color:#ff3366; } #Footer { clear:both; background-color:#ffff00; }

If we remove the clear:both; attribute in #Footer, it seems There is not much difference. Then let's take a look at what will happen if we change the height of the Div in the layout?

Masthead

Sidebar_a

Sidebar_b

Content

Footer: Removed the CLEAR: both; attribute!

This layout does not look good because the foot block follows the flow of the Content block, so the floating blocks on both sides will also be surrounded by it. (My current words should also be "around" the left side of Sidebar_b, because it has not been cleaned up!)

The Clear attribute has 4 values: left, right, both and none; there is nothing to say about the value of none. We first cleaned up both sides of Footer, but what will be the effect of cleaning one side?

Masthead

Sidebar_a

Sidebar_b

Content

Footer: Use the CLEAR:left; attribute!

With these renderings, you should have a good understanding of this attribute. When there are two sidebars, it is safer for Footer to use Clear:both;.