CSS float and clear float

reasons for the existence of floats

In Word layout, text can wrap around a picture. In CSS, to achieve the effect of text wrapping, only with the help of float, there is no alternative way. In practice, the layout of a document often uses floats.

Float Property

The Float property, which defaults to none, is usually the case with standard flow. If the value of the property of float is set to left or right, the element will be adjacent to its parent element, either to or from the side.

Inherit represents the value of the float property inherited from the parent element.

Clear Property

The clear property defines the side on which the element is not allowed to appear floating elements. In CSS1 and CSS2, this is achieved by automatically increasing the upper margin for the purge element (that is, the element that has the clear attribute set).
In CSS2.1, the clearance space is increased above the outer margin of the element, and the margin itself does not change. Either way, the end result is the same, and if the declaration is left or right cleared, the element's
The Sisu border boundary is just below the bottom margin of the floating element on that edge.
The default value of clear is none, allowing floating elements to appear on both sides. Left indicates that floating elements are not allowed on the side. Right means that floating elements are not allowed on the left. Both indicates that floating is not allowed on the left and right sides
Elements. Inherit represents the value of the clear property inherited from the parent element.

The impact of floating

1) Width does not extend automatically, but is subject to content.
2) separate from the standard flow and exist independently.
3) influence the text of the standard stream behind it, and make the text wrap around it.
4) The sub-div in the container is floating, and the container cannot get the sub-div height and does not stretch automatically. If you want to extend automatically, you can set a standard flow div, and this div clears the float.

How to clear floating

The so-called clear float, the exact argument is to clear the impact of the float. Mainly for the 3rd and 4th above.
If you know exactly what the next element will be, you can use Clear:both; To clear the float. This method is very good, it does not need to hack, does not add the extra element also makes it
Have a good sense of semantics.
Of course things don't all work out like this, and there are several other tools that need to be cleaned up in the toolbox.

1) Empty Div method

Literally, it's an empty div.
。 Sometimes it may be used or some other element, but the div is the most common because it does not have a browser default style, no special features, and is generally not styled by CSS. This party
Law is ridiculed by pure semantics only for the sake of performance, without contextual meaning to the page. Admittedly, they're right from a strict point of view, but this approach works and doesn't hurt.

. clearfix {Clear:both;}

2) Overflow method

Set the overflow this CSS property on the parent element. If this property of the parent element is set to auto or hidden, the parent element expands to include the float. This method has a good semantic nature,
Because he doesn't need extra elements. However, if you need to add a new div to use this method, in fact, the empty Div method is just like no semantics. And remember that the overflow property is not for
The clear float is defined. Be careful not to overwrite the content or trigger unwanted scroll bars.
. Fix{overflow:hidden; zoom:1;}

3) after pseudo-class +content method

The simple purge method uses a smart CSS pseudo-selector (: After) to clear the float. Rather than setting overflow on the parent element, just add an extra class like "Clearfix" to it.
This class uses the following CSS:
. Clearfix{zoom:1;}
. clearfix:after{display:block; Content: ' Clear '; clear:both; line-height:0; visibility:hidden;}

Principle of clear float

Block formatting context is a good way to explain the principle of clear float.

1) BFC's popular understanding:
Block formatting context (block-level formatting context) is a concept in the CSS 2.1 specification that determines how elements are positioned on their content, as well as their relationships and interactions with other elements.
To put it simply, we can understand that when we do the box model layout, if an element conforms to the condition of being BFC, the element becomes an isolated container, and the element's inner element is vertically
is arranged along the border of its parent element, and does not affect the external elements. For example, the floating element will trigger BFC, and the child elements inside the floating element are mainly affected by the floating element, while the two floating elements are not affected by each other.

In CSS3, BFC is called Flow Root. There are similar concepts in the early IE haslayout IE6, 7 of many layout-generated bugs (such as 3px Gap, absolute positioning of the inherited width) can be triggered by the Haslayout
Repair, compare the recommended method for Zoom:1 and height:1%, do not break the existing style, I believe we are not unfamiliar with it.

The same past concentration in the float, absolute positioning, margin collaspe a lot of confusion, after understanding the BFC, can be lifted by us.

2) definitions in the BFC specification:
The BFC interpretation of the specification:
Floating elements and absolutely positioned elements, not block containers of block-level boxes (such as Inline-blocks, Table-cells, and Table-captions), and block-level boxes that set the overflow attribute (except visible),
Will create a new BFC (block-level format context) for their content.
In BFC, the boxes are arranged vertically from the top, one by one, and the vertical gap between the two boxes is determined by their margin value. In a BFC, the vertical margins of two adjacent block-level boxes
will produce folding.
In BFC, the left outer edge (margin-left) of each box touches the left edge (border-left) of the container (it touches the right edge for right-to-left formatting).

3) How to trigger BFC:
float element
Position (absolute,fixed)
Display (Table-cell,table-caption,inline-block)
Overflow values other than visible (Hidden,auto,scroll)
FieldSet elements
"Note" in CSS3, block-formatting-contexts is called flow root. The triggering method has also been modified: the value of ' position ' is neither ' static ' nor ' relative ';
Then in the Ie/win, it depends on the "haslayout",

4) The method of triggering "haslayout":
A. Floating elements
B. Absolutely positioned elements
C.display:inline-block
D.zoom: For example, common settings zoom:1;
E.width/height, such as the method of setting height:1%;
F.overflow/overflow-x/overflow-y [IE7 New];
G.max/min-width/height [IE7 New];

5) Characteristics of BFC

edges do not overlap with floating elements
There is no collapsing margins problem
The first feature is particularly useful because elements that trigger the BFC are not covered by the float element and can be correctly contained when the child elements are all floating.
The second margin does not overlap the characteristics, can be understood as two in the ordinary flow of the box, there will be margin overlay problem, because they belong to the same BFC, when he created a new BFC himself, this problem does not exist

Reference articles

Http://kayosite.com/remove-floating-style-in-detail.html
Http://www.qianduan.net/about-float.html
Http://www.cnblogs.com/zorroLiu/archive/2011/04/12/2013901.html
Http://www.cnblogs.com/v10258/p/3530290.html
Http://www.w3school.com.cn/cssref/pr_class_float.asp
Http://www.w3school.com.cn/cssref/pr_class_clear.asp