CSS demo: flaot & amp; clear float, cssdemoflaot

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.