Floating (Clear)

Floating: A floating box can move left and right until its outer edge encounters an edge that contains a box or another floating box. A floating box does not belong to a normal stream in the document, and when an element floats, it does not affect the layout of the block-level box but only the arrangement of the inline box (usually text), and the normal flow in the document behaves as if the float box is not present, and when the float box height exceeds the containing box, It will also appear that the inclusion box does not automatically stretch to close the floating element ("height collapse" phenomenon). As the name implies, is floating on the ordinary stream, like a cloud, but only left and right floating.

From all aspects of comparison, after pseudo-element closure floating is undoubtedly a relatively good solution, the following detailed said the method:

. clearfix:after {content: "."; display:block; height:0; visibility:hidden; clear:both;}

. clearfix {*zoom:1;}

1) Display:block causes the generated elements to appear as block-level elements, occupying the remaining space;

2) height:0 Avoid creating content that destroys the height of the original layout.

3) Visibility:hidden makes the generated content invisible and allows content that may be generated to be covered by the content can be clicked and interacted with;

4) Through the content: "." Generate content as the last element, whether it is a point or anything else is OK, such as oocss inside there is a classic content: "Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", some versions may be content Inside the content is empty, a bit of cold is not recommended to do so, Firefox until 7.0 content: "" will still produce extra space;

5) zoom:1 trigger IE haslayout.

The analysis found that, in addition to Clear:both used to close the float, the other code is nothing more than to hide the content generated, which is why other versions of the closed float font-size:0,line-height:0.

Excellence Programme One:

Relative to the empty label closed floating method code seems to be somewhat redundant, through the query found that the Unicode character character has a "0 width space", that is, u+200b, the character itself is not visible, so we can completely omit the Visibility:hidden

. clearfix:after {content: "\200b"; display:block; height:0; clear:both;}

. clearfix {*zoom:1;}.

Excellence Programme II:

By Nicolas Gallagher Big Wet Proposed, original: A new micro Clearfix hack, this method also does not exist in Firefox gap problem.

/* For modern browsers */

. cf:before,.cf:after {

Content: "";

display:table;

}

. cf:after {Clear:both;} /* for IE 6/7 (trigger haslayout) */

. CF {zoom:1;}

It is important to note that:

The above method used: Before pseudo-elements, a lot of people are confused about this, in the end when I need to use before it? Why is the plan not? In fact, it is used to handle margin overlap, because the inner element float creates the BFC, which causes the margin-top of the inner element and the margin-bottom of the previous box to occur superimposed. If this is not what you want, then you can add before, if only a simple closed floating, after is enough! Not as the desert "Clear Float" article: But only when using clearfix:after when the cross-browser compatibility problem There will be a vertical margin overlay bug, this is not a bug, BFC should have the features.

At this moment, I, the floating still do not understand, the front-end world is still very large, I want to pursue

Floating (Clear)