Div + CSS basic Tutorial: Clear floating

Key words: Clear floating clear

Do you still remember the effect of the example we made in the second lesson? The final result is that both the red and blue squares are in one row. We use "float: Left ", the "overlord" of block elements means that other elements are not allowed to be in the same row as the block element. After we add "float: Left;" to the CSS code of the Red Square, the Red Square finally allows the blue square to be in the same line with it.

We use another method to express the above meaning, because the "left floating" of the Red Square causes the blue square to move to the end of the Red Square;

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 put a green square with a width of 400 pixels and a height of 100, and put 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:

Reference:

. Clear {clear: Both ;}

Add the following code to the HTML code:

Reference:

<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_^

Reference:

<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 !)
If you still don't understand it, add "<Div class =" clear "> </div>" between the red and blue squares to see what the effect looks like, and try again what I just said!

This lesson is here. In the next lesson, we will make a navigation bar, which is very practical! Be sure to thoroughly understand the first three sections. Otherwise, the Fourth Section will not be able to understand it!

Author: kwoojan from: CSS Learning Forum