Use CSS to clear web floats

Source: Internet
Author: User
Tags modify reset
When floating layouts are in place, most people are aware of the need for floating cleanup and a bit of clean floating code. This is a good CSS code habit, but this method adds a useless element

In the floating layout, most people are well aware of the need to carry out floating cleaning: <div style= "Clear:both;" ></div>.

For example:

<div style= "background: #666;" >
<div style= "Float:left; width:30%; Height:40px;background: #EEE; ">some content</div>
</div>

Previewing this code at this point, we will find that the outermost parent element float container is not displayed. This is because the child element is floating, leaving the document stream, causing the parent element's height to be zero.

If you modify the code to:

<div style= "background: #666;" >
<div style= "Float:left; width:30%; Height:40px;background: #EEE; ">some content</div>
<div style= "Clear:both" ></div>
</div>

Notice that there is a bit more to clean up the floating code. This is a good CSS code habit, but this approach adds useless elements. Here's a better way to modify the HTML code to:


<div class= "Clearfix" style= "background: #666;" >
<div style= "Float:left; width:30%; Height:40px;background: #EEE; ">some content</div>
</div>

Define a CSS class for "floating cleanup" control:

Code:
. clearfix:after {
Content: ".";
Clear:both;
height:0;
Visibility:hidden;
Display:block;
}

This is the process of Firefox, because Firefox supports the generation of elements, and IE all versions do not support the generation of elements

. clearfix {
Display:inline-block;
}
/* This is the processing of Internet Explorer on the MAC * *
* HTML. Clearfix {height:1%}
/* This is the deal with the IE browser on Win * *
. clearfix {Display:block}
/* This is a change to Display:inline-block, reset to block elements * *

You will find that the parent element float container still surrounds it and is highly adaptive even if the child element is floating.

The margin-top of the clear element is reset to zero



Related Article

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.