Float of Web page layout

First, the principle of floating
A float is a layout that lets an element out of a standard flow and floats above a standard stream. When any element is set to a floating element, it indicates that it is a block-level element with a wide-height attribute.
Second, the impact of floating
1. The position of the sibling element that affects it
When an element sets a floating style, it affects its sibling elements, and as to how it affects, it depends on whether its sibling element is a block-level element or an inline element. If the sibling element is a block-level element, it ignores the floating element, which is the sibling element and the floating element, which overrides the sibling element. Unless the div is set to width and the parent element is not wide enough to contain them, the sibling element is forced to wrap, and if the sibling element is an inline element, the floating element is surrounded as much as possible.
2, will cause the parent element height automatically clear zero
Floating elements break out of the normal stream, causing the parent element to collapse highly.
Closed float: Causes the floating element to close, thereby reducing the impact of the float.
Three, closed floating methods broadly divided into two categories
1. Take advantage of the clear attribute. You can close an element by adding an empty div with the Clear:both property at the end of the floating element, or by adding an element with a dot and a Clear:both attribute at the end of the floating element to the after pseudo-element to close the element.
A, with empty div closed floating

. CLR1 { Clear:both;} <div class= "Box1" > <div class= "fl" > Left float </div> <div class= "fr" > right float </div> <div style= "CLR1" > Clear float </div></div>

B, with: After pseudo-element closed floating

. Clr2:after{Clear:both;Display:Block;content:'. ';Overflow:Hidden;Visibility:Hidden;Height:0; }//Google, Firefox CLR2{Clear:both;Zoom:1; }//ie <div class= "Box2 clr2" > <div class= "fl" > Left float </div> <div class= "fr" > right float </div> </div>

2. Trigger the BFC of the floating element's parent element so that its parent element can contain floating elements.
A, adding a float to the parent element of a floating element is not recommended.
B, add display:table-cells to the parent element of the floating element, which will change the box model and is not recommended for use.
C, set the parent element of the floating element overflow property to hidden or auto, you can close the float. You also need to trigger haslayout in IE6, such as setting the container width height for the parent element or setting the zoom:1.

Float of Web page layout