The reason why the parent class clears the floating (clear the floating code and place it in CSS for easy calling), floating css

Source: Internet
Author: User

The reason why the parent class clears the floating (clear the floating code and place it in CSS for easy calling), floating css

Floating factors are often applied in the production of static Web pages. For example, to make block-level elements not exclusive to a row, float is often applied. However, the application will find that, after the subclass floating is set, the parent class is not cleared, which will cause the following problems:

1. the floating element will float with the parent container or the previously positioned element. The floating element will not be in the document flow, that is, it will no longer occupy the original position, and will affect the subsequent element or parent container..

2. The parent container automatically scales up normally, but the position of the child element is not retained after the child element is added with a floating value. The parent container will feel that it does not exist, so it will not scale up.

Therefore, when writing static Web pages, you must pay attention to the floating clearing problem. A piece of floating clearing code can be easily called:

. ClearFloat: after {

Content :'';

Display: block;

Height: 0;

Visibility: hidden;

}

. ClearFloat {

Zoom: 1;

}

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.