CSS Demo:flaot & Clear Float

1, first, we lay out the basic div block:

As shown in the following code, we write 3 basic div blocks inside the body, and then set some basic properties:

：

2, add basic floating

now we want to make the red Div put it in green . Div right, we're in two Div Add floating in

：

3, add a div in the standard stream

：

added a div float Effect, red block div div div , This effect is appropriate to conform to float

However, it can be clearly seen that the floating will bring a cover bad effect, but in the real web design, we do not need the effect of this cover.

Next shows how to clear the float:

4 , first we move the red block to the right

：

5 and now I want to let the chunks not be covered

Clear the left float of the orange block:

Effect:

6 , in order to be able to see the effects of floats more clearly, now, we, change the size below: Will the red Div the height is longer and the orange color Div Length Clear

Effect:

7, then we clear the right float for the yellow div , and then add the green div Length:

Effect:

You can see that the top of the yellow div clings to the bottom of the red Div, but because the green div is longer, there is a cover effect:

8, in order to clear the left float, but also to clear the right float,I'll takeboth;

The effect is as follows:

CSS Demo:flaot & Clear Float