Use CSS to clear web floats

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