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;

}