小薇学院任务三笔记2（清除浮动）

之前在上篇笔记中提到了清除浮动，也学习了两个方法。一个是给清除浮动的元素添加clear属性，而另一种则是借助块级格式化上下文。但这个问题显然不仅仅只是这样而已，前辈们还提出过许多解决办法。

1.Element using "clear" property
The quick and dirty solution:

Using the clearing element solution is not ideal for many reasons:
a.The main reason: you're putting presentation in your markup. This makes reusing the markup more difficult if you don't want the
style in another context where the same markup is used. CSS should be used style the same markup differently in different contexts.
b.doesn't add any semantic value to your markup.
c.makes your code looks unprofessional.
d.in the future when other clearfix solutions are aviliable you won't have to go back and remove all your
tags which littered around your markup.

2."::after" Pseudo-element
This older "Easy Clearing" method has the advantage of allowing the positioned elements to hang outside the bounds of the container,at the expense of more tricky CSS.

.container{
    display: inline-block;
}
.container::after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.container{
    display: block;
}

Note that you should always use the double colon, ::, for before and after, unless you need to support IE8. A double colon is standard for pseduo-element, and the single-colon implementation is deprecate and support could well be dropped in the future.

3.Overflow property
This basic method is preferred for the usual case, when positioned content will not show outside the bounds of container.

.container{
    overflow: hidden;
    display: inline-table;/* Necessary to trigger "hasLayout" in IE*/
    display: block;
}

Rather than use the display property to set "hasLayout" for IE, other properties can be used for triggering "hasLayout" for an element.

.container{
    overflow: hidden;/* clearfix */
    zoom: 1;/* Triggering "hasLayout" in IE */
    display: block;/* ELement must be a block to wrap other contents.*/
                   /* Unnecessary if only using block level elements. */ 
}

Another way to clear float using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:

.container{
    overflow: hidden;
    _overflow: hidden;/* for IE */
    _zoom: 1;/* for IE */

While this works... it is not ideal to use hacks.

4.Micro Clearfix
The most recent and global adopted clearfix solution, the Micro Clearfix by Nicolas Gallager.

.container::before,.container::after{
    content: "";
    display: table;
}
.container::after{
    clear: both;
}
.container{
    zoom: 1;/*for IE 6/7 (trigger hasLayout)*/
}

5."Beat That ClearFix", a clearfix for modern browsers
Thierry Koblentz' of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom and ::before property/values and simply use:

.container::after { 
    content:""; 
    display:table; 
    clear:both;
}

This solution does not support for IE 6/7 …on purpose!
Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."

6."Reloaded" clearfix
Thierry Koblentz' of CSS Mojo wrote another article revisiting the clearfix, making a strong argument for dropping display: table in favor of display: block which has the advantage of not disabling margin-collapse between containers.
The latest micro-clearfix code is now:

.container::after { 
    content:""; 
    display:block; 
    clear:both;
}