CSS demo: flaot & amp; clear float, cssdemoflaot

CSS demo: flaot & clear float, cssdemoflaot

1. First, we layout the basic div blocks:

The following code writes three basic div blocks in the body and sets some basic attributes:

 

:

2. Add basic floating

Now we want the red div to be placed on the right side of the green div, and we add floating in the two divs.

:

3. Add a div in the standard stream

:

After adding a div in the standard stream, we can see a float effect. The red div and the green div float on the orange div like the cloud, this effect matches the word float.

 

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

 

Next we will demonstrate how to clear the float:

 

4. First, move the red block to the right.

:

5. Now I want to make the bulk uncovered

 

Clear the left float of the orange block:

Effect:

6. In order to better understand the influence of floating, now we can change the following size: increase the height of the red div and clear the orange div length.

Effect:

7. Then we clear the right float for the yellow div and lengthen the green div:

Effect:

It can be seen that the top of the yellow div is closely tied to the bottom of the red div, but because the green div is lengthened, there is another effect of covering:

8. To clear both the left float and the right float, I'll take both;

The effect is as follows:

What is the css demo?

Try entering playdemo [DEMO name] on the console]

CSS flaot: How to automatically increase the height of the previous div after left

Well, it seems that only tables can achieve this effect, unless you give them both fixed heights.