深入理解系列之 float

float的设计初衷：

仅仅是为了实现文字环绕效果

float的感性认知：

1. 包裹性：
   1. 收缩：元素应用了float后，宽度收缩，紧紧地包裹住内容（即元素的宽度收缩到元素内的内容的宽度大小
   2. 坚挺：原来没有高度，但元素应用了float后，元素的高度突然扩展到内容的高度大小
   3. 隔绝：元素应用了float后，盒子里面的内容发生了任何事情，都与盒子外的内容无关（BFC）
2. 破坏性:
   1. 子元素应用了float后，父容器塌陷：父容器的高度变为0

tips: 具有包裹性（BFC特性）的其他属性：

display: inline-block/table-cell

position: absolute/fixed/sticky

overflow: hidden/scroll

具有破坏性的其他属性:

display: none

position: absolute/fixed/sticky

清除float对其他元素所带来的影响：

1. float元素底部插入一个带有 clear: both; 属性的元素

   1. 底部放置一个HTML block水平元素 -
   2. CSS after（IE8+）伪元素底部生成 - .clearfix:after{ clear: both; }

2. 父元素BFC化（IE8+）或 haslayout（IE6/7)

BFC/haslayout的通常声明

1. float: left/right
2. position: absolute/fixed
3. overflow: hidden/scroll（IE7+)
4. display: inline-block/table-cell（IE8+)
5. width/height/zoom: 1/...（IE6/7）

综上，IE8以上浏览器使用：

.clearfix:after {
        content: '';
        display: block;
        height: 0;
        overflow: hidden;
        clear: both;
    }

.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}

.clearfix {
    *zoom: 1;
}

切记，.clearfix 只需应用在浮动元素的父级元素上 浮动的特性:

1. 元素block块状化（砖头化）
2. 破坏性造成的紧密排列特性（去空格化)

智能化自适应布局

<div class="container"><a href="#" class="left"><img src="url"/></a>
    <div class="right">很多其他内容</div>
</div>

.container {
    width: 600px;
    margin: auto;
}

.left {
    float: left;
    margin-right: 20px;
}

.right {
    display: table-cell;
    *display: inline-block;
    width: 2000px;
    *width: auto;
}