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