Summary clear Floating Method Daquan (7 kinds)

1) Add additional tags
This is a way for teachers to tell us at school, by adding an empty label at the end of the floating element such as <div style=”clear:both”></div>， other label Br.
Again such as:

<Div class="Warp" ID="FLOAT1"> 1) Add extra Tags Div class="Main left">.main{float:left;} </Div> <Div class="Side left">.side{float:right;} </Div> <Divstyle="Clear:both;"></Div> </Div> <Div class="Footer">.footer</Div>

Advantages: Easy to understand
Disadvantage: Can imagine through this method, will add how many meaningless empty tags, the structure and performance of the separation, in the post-maintenance will be a nightmare, it is resolutely unbearable, so you read this article or recommend not to use it.
2) Use the BR tag and its own HTML attributes
This method is somewhat small, BR has clear= "all | Left | Right | None "property.
Such as:

<h2>2) Use the BR tag and its own HTML attributes</H2> <div class="main left">. Main{float:left;}</div> <div class="side Left">. Side{float:right;}</div> <BR Clear="All" /> </div> <div class="Footer">. footer</div> 

Pros: Slightly more semantic than empty labels, less code
Cons: Also contrary to the structure and performance of the separation, not recommended to use
3) parent element Settings Overflow:hidden
The overflow value is set to hidden by setting the parent element, and haslayout, such as Zoom:1, is also triggered in IE6;

<div  class  =  "warp"  id  = "FLOAT3"  style=  > 3 ) parent element settings overflow div  class  = "main left"  >.main{float:left;} </div  > <div  class  = "side left"  >.side{float:right;} </div  > </div  > <div  class  =" footer ";. Footer</div  > 

Pros: There is no structural and semantic problems, very little code
disadvantage: The content is more prone to cause the content to be hidden, unable to display the elements that need to overflow; 04 Popo found Overflow:hidden will cause the middle key to fail, This is not acceptable to me as a multi-tabbed browsing control. So don't use the
4) parent element to set the Overflow:auto property
same IE6 need to trigger Haslayout, demo and 3 almost
Pros: no structural and semantic issues, minimal code
Disadvantage: After multiple nesting, Firefox in some cases will cause the content to be selected, ie in the mouseover cause width changes will appear the outermost module has scroll bar, etc., Firefox earlier version will not cause focus, etc., please see whining's Demo, do not use
5) parent element also set floating
Pros: No structural and semantic issues, minimal code
Disadvantage: The layout of elements adjacent to the parent element is affected, it is not possible to float to the body, not recommended
6) parent element settings display:table
Graceful Demo
Pros: The structure is semantically correct, the code is very small
Disadvantage: Box model properties have been changed, resulting in a series of problems, not worth it, not recommended
7) use: After pseudo-element
Note: After is a pseudo-element (pseudo-element), is not pseudo-class (some CSS manuals called "pseudo-Object"), a lot of clear floating encyclopedia and other articles are called Pseudo-class, but csser to be rigorous, this is an attitude.
Because IE6-7 does not support: After, use zoom:1 to trigger haslayout.
The method originates from: How to Clear floats without Structural Markup
such as:

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

Pros: The structure and semantics are completely correct and the code is centered
Cons: Improper reuse will result in increased code volume
Summary
By contrast, we are not difficult to find, in fact, the above enumerated methods, there are two types:
First, by adding an empty element at the end of the floating element and setting the Clear:both property, the after pseudo-element is actually a block-level element that generates content as a point after the element in the contents;
Second, by setting the parent element overflow or the Display:table property to close the float, let's explore the principle.
In CSS2.1 there is a very important concept, but the domestic technology blog introduced less, that is block formatting contexts (block-level formatting context), hereinafter referred to as BFC.
CSS3 This specification has been changed, called: Flow root, and the trigger conditions are further explained.
So how do you trigger BFC?
Float value other than none
Overflow values other than visible (Hidden,auto,scroll)
Display (Table-cell,table-caption,inline-block)
Position (absolute,fixed)
FieldSet elements
Note that display:table itself does not create BFC, but it generates an anonymous box (anonymous boxes), and Display:table-cell in the anonymous box can create a new BFC, in other words, The block-level formatting context is triggered by an anonymous box, not display:table. So the BFC effect created by display:table and Display:table-cell is not the same.
The fieldset element does not currently have any information about the triggering behavior in www.w3.org until the HTML5 standard appears. Some browsers bugs (Webkit,mozilla) mention the triggering behavior, but there is no official statement. In fact, even if fieldset can create a new block-level formatting context on most browsers, developers should not take it for granted. CSS 2.1 does not define which properties apply to form controls, nor does it define how to use CSS to add styles to them. User agents may apply CSS properties to these properties, suggesting that developers use this support as an experimental feature, and that later versions of CSS may further regulate this.
Features of the BFC:
1) block level formatting context blocks margin overlays
When two adjacent block boxes are in the same block-level formatting context, the vertical margin between them will overlap. In other words, if the two adjacent block boxes do not belong to the same block-level formatting context, their margins are not superimposed.
2) block-level formatting contexts do not overlap floating elements
As a rule, the bounding rectangle of a block-level formatting context cannot overlap the margins of the elements inside it. This means that the browser will create an implicit margin for the block-level formatting context to prevent it from overlapping the margin of the floating element. For this reason, it will not work when you add a negative margin to a block-level formatting context that is next to floating (WebKit and IE6 have a problem at this point-you can see this test case).
3) block-level formatting contexts can often contain floating
See: css2.1-10.6.7 ' Auto ' Heights for block formatting context roots
In layman's terms: the element that created the BFC is a separate box in which the child elements do not affect the outside elements on the layout, and vice versa, while BFC still belong to the normal flow in the document.
At this point, you may understand why Overflow:hidden or auto can be closed because the parent element creates a new BFC. For Zhang Xin Xu in the "Overflow and zoom" clear floating "of some understanding" in the article to use the package to explain the principle of closed floating, I think is not rigorous, and there is no basis. and said "Firefox and other browsers do not have the concept of haslayout", then the modern browser is BFC, from the performance, Haslayout can be equated with BFC.
Ie6-7 's display engine uses an internal concept called layout, which, due to the many flaws in the display engine itself, leads directly to many of the ie6-7 's display bugs. When we say that an element "gets layout", or an element "has layout", we mean that its Microsoft proprietary attribute Haslayout is set to true for this purpose. Ie6-7 uses the concept of layout to control the size and positioning of elements, and those elements that have layouts (with layout) are responsible for the sizing and positioning of their own and their child elements. If the haslayout of an element is false, its size and position are controlled by the ancestor element that recently owns the layout.
Conditions for triggering haslayout:
Position:absolute
Float:left|right
Display:inline-block
Width: Any value except "Auto"
Height: Any value except "Auto" (for example, many people will use height:1% to clear the float)
Zoom: Any value except "normal" (MSDN)
In IE7, overflow also becomes a layout trigger:
Overflow:hidden|scroll|auto (this property does not have the ability to trigger layout in previous versions of IE.) ）
Overflow-x|-y:hidden|scroll|auto (attributes in the CSS3 box model have not yet been widely supported by the browser.) They also did not trigger layout in the previous IE version)
Haslayout A more detailed explanation, see the famous "on have layout" of old9 translations.

Summary clear Floating Method Daquan (7 kinds)