Clear clears element container float in CSS

1. The origin of the problem

There is a situation in which a container (container) has two floating child elements, as shown in Figure I.

(Figure One Design view is a parent container that contains two floating child elements)

What should I write HTML code for?

Very simple, a few lines of words is enough.

The code is as follows	Copy Code
<div> <div style= "float:left;width:45%;" ></div> <div style= "float:right;width:45%;" ></div> </div>

The code above is completely correct, but if you run it in a browser, unexpected results will occur.

(Figure II The actual view is that child elements are displayed outside the parent container)

The two seem to be out of relationship, how could this be?

2. The cause of the problem

In fact, the reason is very simple, and floating positioning.

In the CSS specification, floating positioning does not belong to the normal page stream (page flow) and is positioned independently. Therefore, only the parent container of the floating element is displayed, regardless of the position of the child elements, as they do not exist. This results in the display of the parent container as if it were an empty container.

3. Workaround one: Add empty element

The classic workaround is to add a non floating element below the floating element, just like figure three.

(Figure three adds a non floating element at the bottom of the parent container)

The code writes this:

The code is as follows	Copy Code
<div> <div style= "float:left;width:45%;" ></div> <div style= "float:right;width:45%;" ></div> <div style= "Clear:both;" ></div> </div>

In this way, there is no problem, can be normal display. The principle is that the parent container must now consider the position of the non floating child element, and the latter must appear below the floating element, so that the parent container will include all the child elements in the display.

This approach is simpler, but adding redundant tags to the page violates the principles of the semantic Web. So, is there a way to not modify the HTML code?

4. Workaround two: Floating parent container

Another idea is to simply change the parent container to a floating position so that it can float with the child element.

The code writes this:

The code is as follows	Copy Code
<div style= "Float:left;" > <div style= "float:left;width:45%;" ></div> <div style= "float:right;width:45%;" ></div> </div>

This method does not need to modify the HTML code, but the disadvantage is that when the parent container becomes floating, it affects the positioning of the elements behind it, and sometimes the parent container is positioned dead and cannot become a float.

5. Workaround three: The automatic clearing of floating element

The idea is to allow the parent container to automatically "clean up" (clearing) child elements, so that the location of the floating child elements can be identified and no error on the display will occur.

To do this, just add a "overflow:hidden" CSS statement to the parent container. The code writes this:

The code is as follows	Copy Code
<div style= "Overflow:hidden;" > <div style= "float:left;width:45%;" ></div> <div style= "float:right;width:45%;" ></div> </div>

The disadvantages of this method are mainly two, one is not supported by IE 6, and the other is that once the child element size exceeds the size of the parent container, the problem is displayed.

6. Workaround Four

or back to method one, can you add child elements through CSS statements so that you don't have to modify the HTML code?

The answer is yes, we know there is one in the CSS statement: after the pseudo selector, you can automatically create a child element at the end of the parent container, which is exactly what we need.

The following code refers to the wording of Lifesinger:

The code is as follows	Copy Code
. clearfix:after { Content: "020"; Display:block; height:0; Clear:both; }

The "Clearfix" is the class name of the parent container, "Content:" 020 ";" is to place a blank character at the end of the parent container, "height:0;" Is let this blank character not show up, "Display:block; Clear:both; " is to make sure that this whitespace character is not floating in a separate block.

However,: After the selector is not supported by IE 6, which means that the above code in IE 6 invalid, this How to do?

We add a unique command for IE 6 "zoom:1;" , the function of this command is to activate the "Haslayout" attribute of the parent element so that the parent element has its own layout. (For specific meanings, see the Appendix to this article.) IE 6 will read this command, and other browsers will ignore it directly.

7. Final Production Code

The code is as follows	Copy Code
. clearfix:after { Content: "020"; Display:block; height:0; Clear:both; } . clearfix { Zoom:1; }

Updated 2011.04.21

Nicolas Gallagher posted more general production code.

The code is as follows	Copy Code
/* For modern browsers * * . Cf:before, . cf:after { Content: ""; Display:block; } . cf:after { Clear:both; } * For IE 6/7 (trigger haslayout) * * . CF { Zoom:1; }

[Reference reading]

* Ppk:clearing Floats

* How to clear floats without structural Markup

* Mezzoblue:clearance

====================

Appendix What is Haslayout

(The following is excerpted from the Chinese version of CSS Mastery, "Master CSS Advanced Web Standard Solution", page 154th, People's post and Telecommunications Press, 2007)

IE uses the layout concept to control the size and position of elements. If an element has a layout, it has its own size and position, and if not, its size and position are controlled by the most recent ancestor element with the layout.

By default, the elements that have layout include:

The code is as follows	Copy Code
<table>, <tr>, <th> <td> <input>, <button>, <select>, <textarea>, <fieldset> <legend> <iframe>, <embed>, <object> <applet> <marquee>

(Note that,<p> and <div> do not own layout by default.) ）

Clear Usage

The Clear property value has four clear:both|left|right|none;

Function: The value of this property indicates that an edge of a floating object is not allowed.
This property is used to control the physical location of the float property in the document flow.

When the property is set to float (float), his physical location is out of the document stream, but most of the time we want the document stream to recognize float (float), or to want the elements behind float (float) to be unaffected by float (float), which we need to use clear: Both; to clear.

Clear:left; indicates that there is no floating element on the left side of the element;
Clear:right; indicates that there is no floating element on the right side of the element;

Clear:both means that there are no floating elements on either side of the element;

Clear:none indicates that floating elements are allowed on both sides.