CSS浮动和清除浮动

1. 浮动的背景和工作原理

浮动的最初是用来让文字环绕图片, 所以我能能推出:
浮动会脱离正常的文档流，并吸附到其父容器左边，正常布局中位于浮动元素下的内容会围绕着浮动元素

2.浮动的包裹性

包裹性指的是元素尺寸刚好容纳内容, 表现得就像diaplay:inline-block一样
具有包裹性的其他属性:

display:inline-block
position:absolute/fixed/sticky
overflow:hidden/scroll

3. 浮动的破坏性

会使父元素高度塌陷——为了实现文字环绕效果
具有破坏性的其他属性:

display:none
position:absolute/fixed/sticky

4.清除浮动

清除浮动方法大致有两类，一类是clear:both | left | right ,另一类则是创建BFC,细分又可以分为多种。
通过在浮动元素末尾添加一个空的标签例如并设置样式为clear:both | left | right ，其他标签br等亦可。

<div class="parent">
    <div class="child"></div>
    <div style="clear: both;"></div>
</div>

优点：简单。
缺点：增加了额外的标签，并且很显然这并不符合语义化。

*使用 br标签和其自身的 html属性，br 有 clear=all | left | right | none；的属性。

<div class="parent">
    <div class="child"></div>
    <br clear='all'>
</div>

优点：简单代码量少，比空标签语义化稍好。
缺点：同上。
使用::after伪元素(万金油方法)
ps:由于IE6-7不支持:after，使用`zoom:1触发hasLayout。其实是通过 content 在元素的后面生成了内容为空的块级元素
代码如下

.clearfix:after {
    content:"";
    display:block;
    height:0;
    visibility:hidden;//这一条可以省略，证明请看原文精益求精部分
    clear:both; 
}
.clearfix {
    zoom:1;
}

优点：结构和语义化完全正确,代码量居中。
缺点：复用方式不当会造成代码量增加。
伪元素还有一种写法

// 用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式
.clearfix:before, .clearfix:after {
     content:"";
     display:table;
}
.clearfix:after{
     clear:both;
     overflow:hidden;
}
.clearfix{
    zoom:1; 
}

父元素设置 overflow：hidden,(PS:在IE6中还需要触发 hasLayout ，例如 zoom:1)
优点：不存在结构和语义化问题，代码量极少。
缺点：由于hidden的原因，当内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，还会导致中键失效（鼠标中键）。
父元素设置 overflow：auto 属性
优点：同上
缺点：多个嵌套后，会有bug，详情看原文。
父元素也浮动
优点：代码少
缺点：总不能一直浮动到body吧。
父元素设置display:table
优点：结构语义化完全正确，代码量极少。
缺点：会造成盒模型的改变。