关于CSS深入理解float浮动，float且用且珍惜

今天很高兴为大家分享一下，关于深入理解float的那些二三事~

首先关于float浮动的问题，大家还是要知道一点点它的历史，这对之后深入理解float很重要。

其实当初写float出来的人，他的本意到底是什么？

其实float的设计初衷就仅仅只是，完全的实现一种文字环绕的效果而已，具体如下图所示~

大家都知道浮动是具有破坏性，会让父元素高度塔下崩塌，看着也是挺惨的。所以又要提到最开始说的，浮动的破坏性只是拿来实现文字环绕效果的。那么我现在给大家看下主流的清楚浮动的方法————

---

使用伪元素来清除这该死的浮动(:after注意：作用于浮动元素的父元素）

.clearfix:after{
    content:"";/*设置内容为空*/
    height:0;/*高度为0*/
    line-height:0;/*行高为0*/
    display:block;/*将文本转为块级元素*/
    visibility:hidden;/*将元素隐藏*/
    clear:both;/*清除浮动*/
}
.clearfix{
    zoom:1;/*为了兼容IE*/
}
<div class="box clearfix">
    <div class="lol">0000</div>
    <div class="mad">00000</div>
    <div class="hape">000000</div>
</div>
</body>

使用双伪元素清除浮动——————无需额外的标签，浏览器兼容性好，是目前用的最多的一种清除浮动的方法之一

.clearfix:before,.clearfix:after {
     content: "";
     display: block;
     clear: both;
}
.clearfix {
     zoom: 1;
 }

顺带一提，现在clearfix现在已经沦落到了滥用的地步。现在很多网站基本上每层元素上每层标签上，大家要明白.clearfix只能应用在包含浮动的父元素上。乱入的haslayout是会让IE6/IE7做出一些崩坏的事情。

浮动是魔鬼，一塌两行泪。

直接的浮动是会导致————

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

搬砖式布局，只会导致之后容错性比较糟糕，容易出现问题。并且这种布局需要元素固定尺寸，是很难重复使用。在很多的低版本IE下只能欲哭无泪了。

咳咳咳~那么干货来了啊，针对这种搬砖式的直接浮动，我们可以使用这种方法，来减少崩坏的可能。

浮动的流体布局

文字环绕模式（左浮动—中间内容—右浮动）

单侧固定（width+float）

唉，懒了不想打了- -简单描述下。举个栗子~

固定左侧，右侧内容自适应。

两侧皆自适应的流体布局

下面丢一串代码，自己体会~

display: table-cell; *display: inline-block; *width: auto; 

最后再说一句，合理使用浮动，且用且珍惜。