You may not be aware of CSS floating issues

Source: Internet
Author: User

Recently in the development process, sometimes often meet clearly know the need to do so, but why do we always do not understand why.

Let's start by explaining what's called Clear float :

In non-IE browsers (such as Firefox), when the height of the container is auto, and the contents of the container are floating (float is left or right), in which case the height of the container cannot be automatically stretched to fit the height of the content. A phenomenon that causes content to overflow outside the container and affect (or even destroy) the layout. This phenomenon is called floating overflow, in order to prevent the occurrence of this phenomenon of CSS processing, called CSS to clear the float.

As defined above, when the height of the container is auto, we use float as (right | | left). The result that the parent element cannot be stretched appears.

The image is not using the floating effect, when we add a floating style (Float:left) to the item

The result is that the height of the parent element of Li is 0.

So when I use float, I usually add a fixed height to the parent element, or use the pseudo-class of after to give the element a floating effect.

Of course, there are many ways to clear the float, I feel free, after all, will always find the right one for you.

You may not be aware of CSS floating issues

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.