This document is copied from http://blog.csdn.net/clare504/article/details/39524215. 1. The origin of the problem
There is a situation in which there are two floating child elements in a container (container).
<div>
<div style= "float:left;width:45%;" ></div>
<div style= "float:right;width:45%;" ></div>
</div>
When running in a browser, unexpected results can occur. The actual view is the child element that appears outside the parent container.
2. The cause of the problem is related to floating positioning.
In the CSS specification, floating positioning is not part of the normal page flow, which is independently positioned. Therefore, only the parent container that contains the floating elements, when displayed, does not consider the position of the child elements, as if 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 elements
The classic solution is to add a non-floating element underneath the floating element.
The code writes like this:
<div>
<div style= "float:left;width:45%;" ></div>
<div style= "float:right;width:45%;" ></div>
<div style= "Clear:both;" ></div>
</div>
The principle is that the parent container must now consider the position of the non-floating child element, which must appear below the floating element, so the parent container will include all the child elements in it. This method is relatively simple, but to add redundant labels to the page violates the principle of the semantic Web.
4. Workaround two: Floating parent container
Another idea is to simply change the parent container to a floating location so that it can float with the child elements.
<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 the parent container becomes floating, it will affect the positioning of the subsequent elements, and sometimes the parent container is dead, cannot become floating.
5. Workaround three: Automatic clearing of floating elements
Allows the parent container to automatically "clean up" (clearing) the float of the child element, allowing the position of the floating child element to be recognized without error on the display.
To do this, just add a "overflow:hidden" CSS statement to the parent container. The code writes like this:
<div style= "Overflow:hidden;" >
<div style= "float:left;width:45%;" ></div>
<div style= "float:right;width:45%;" ></div>
</div>
The disadvantage of this method is mainly two, one is IE 6 is not supported, and the other is that once the child element size exceeds the size of the parent container, it will show the problem.
6. Workaround Four: Can you add child elements through a CSS statement so that you don't have to modify the HTML code?
The answer is yes, we know that there is one in the CSS statement: after pseudo-selector, you can automatically create a child element at the end of the parent container, which fits our needs.
The following code refers to the notation of Lifesinger:
. clearfix:after {
Content: "\0020";
Display:block;
height:0;
Clear:both;
}
"Clearfix" is the class name of the parent container, "Content:" 020 ";" is to place a white space character at the end of the parent container, "height:0;" Is let this this whitespace character not show out, "Display:block; Clear:both; " is to ensure that this whitespace character is a non-floating, independent block.
However,: after the selector IE 6 is not supported, that is, the above code in IE 6 is not valid, what to do?
We add a unique command for IE 6 "zoom:1;" All right, the purpose of this command is to activate the parent element's "haslayout" property so that the parent element has its own layout. IE 6 will read this command, and other browsers will ignore it directly.
7. Final code
. clearfix:after {
Content: "\0020";
Display:block;
height:0;
Clear:both;
}
. clearfix {
Zoom:1;
}
8. Appendix What is Haslayout
IE uses layout concepts to control the size and position of elements. If an element has layout, it has its own size and position, and if not, its size and position are controlled by the most recent ancestor element that owns the layout.
By default, elements that have layout include:
<table>, <tr>, <th>, <td>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
(Note that,<p> and <div> do not have layout by default.) ）
Any element that has the following CSS properties will also have a layout:
Position:absolute
Float:left|right
Display:inline-block
Width:any value other than ' auto '
Height:any value other than ' auto '
Zoom:any value other than ' normal ' (ie private property)
WRITING-MODE:TB-RL (ie private properties)
Overflow:hidden|scroll|auto (only valid for IE 7 and later)
Overflow-x|-y:hidden|scroll|auto (only valid for IE 7 and later)
Haslayout is an attribute unique to IE, not a CSS property. You can use the JavaScript function haslayout to see if an element has layout. If so, this function returns true; otherwise it returns false. Haslayout is a read-only property and cannot be set using JavaScript.
Blog Original address: http://www.w3cfuns.com/blog-5452328-5400604.html
Principle and method of clearing floating
