[2] CSS-block and inline Elements

In the previous example, "Float: left;" is added to the CSS code of the red and blue squares to achieve browser compatibility, so that IE and FF show the same effect, if we want to add a 400 pixel width,
The green box with a height of 100, and place it in the second line. The effect is as follows:

However, no matter how it is put at this time, the effect in IE is always:

The reason for this problem is that the CSS code in the blue square contains "Float: left;", but it cannot be removed for browser compatibility (what? I cannot understand this sentence. It only means that you are not good at learning and have a good taste in the second class !), What should I do? Easy to handle ~! Add the following code to the CSS code:

 .clear{clear:both;}

Add the following code to the HTML code:

 <div class="clear"></div>

The above sentence is added to that position. We need to add it to the center of the blue and green squares and see if the effect is what we want ~ Pai_^

 <Div id = "redBlock"> left-side blog </div>
<Div id = "blueBlock"> right of the blog </div>
<Div class = "clear"> </div>
<Div id = "greenBlock"> blog copyright information </div>

The purpose is to clear the effect of floating blue blocks on the following green blocks! Yes ~ Is to clear the impact, rather than clear the floating of the blue block, or clear the floating of the blue block on the following area of the role! (This is what I said for careful product !)