CSS 之float

1： float的设计初衷是 为了文字的环绕效果

   破坏性

　　首先大家来看两个demo，如下图。第一个demo是一个简单不过的例子，显示效果也很正常。第二个demo，唯一的区别就在于<img>加了float:left，上层的<div>却出现了“坍塌”现象。

　　

　　不过，这就是float的“破坏性”——float破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流。

　　初次接触“脱离文档流”的朋友可以这样理解：div是父亲，img是它的儿子，原本好好的父子关系，原本爷俩可以体面的展示一个包含关系的效果。直到有一天，img被设置了float。老天爷（浏览器）规定，任何float元素都不允许再呆在自己的家族中，于是img被逐出家门，断绝和div父子关系。于是乎，div没有了img儿子，也就不能再展示这种父子的包含关系，于是两者就各过各的，互不相干。——这样一说，容易理解了吧？

　　但是，永远都不要忘记float被设计的初衷——实现文字环绕效果。当div中有文字时，文字还是会环绕在img周围的。如下图：

　　

      

　　好了，大家现在已经知道了float具有破坏性，可能也有很多朋友之前就知道这一特性，但是你有没有思考一下：float为什么会被设计成具有破坏性，为什么会脱离文档流？这一点非常重要！其实原因非常简单——为了要实现文字的环绕效果？

　　有人可能会问：啊？你刚才不是说了float的初衷就是实现文字环绕效果吗？和破坏性有啥关系？

　　这时我会反问你：如果float不让父元素坍塌，能实现文字环绕效果吗？给你两个图看看你就知道了。看不明白的可以给我留言讨论。

　　

2.3.    包裹性

　　“包裹性”也是float的一个非常重要的特性，大家用float时一定要熟知这一特性。咱们还是先从一个小例子看起：

　　

　　如上图，普通的div如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。

　　注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。

　　

　　说道这里咱们回顾一下，在之前的博客中，也提到了“包裹性”，是哪些样式？你可以在此思考一下，我会在博客的评论中给出答案 。

　　

　　知道了包裹性之后，我们还是继续思考：float为什么要具有包裹性？其实答案还得从float的设计初衷来寻找，float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个div呢？此时div不被“包裹”起来，那么如何去实现环绕效果？

　　道理很简单，你也可能是那种一点即通的聪明人，但是关键在于思考。

2.4.    清空格

　　float还有一个大家可能不是很熟悉的特性——清空格。按照管理，咱还是先举例子说明。

　　

　　上图中。第一个例子，正常的img中间是会有空格的，因为多个<img>标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。

　　如果大家之前没注意，现在想想之前写过的程序，是不是有这个特性。为什么float适合用于网页排版（俗称“砌砖头”）？就是因为float排版出来的网页严丝合缝，中间连个苍蝇都飞不进去。

　　“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。

清除float

　　《上篇》中我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”） ？方法有很多种，我在这里介绍4中供大家参考，大家可根据实际情况来选择。

　　先介绍两个比较简单，但是不常用的解决方法：

1. 为父元素添加overflow:hidden
2. 浮动父元素

　　这两个方法比较简单，在这里也就不再演示了，大家有兴趣的可以自己去试试。

　　第三种方法也不是很常用，但是大家要知道clear:both这个东西。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。

　　

      

　　接下来的第四种方法是大家最需要掌握的，也是我推荐的，也是bootstrap正在用的——clearfix——不知道的同学一定要去搜一下，要不然就太low了！

　　

　　上图中，我们定义一个.clearfix类，然后对float元素的父元素应用这一样式即可，非常简单吧？注意，你可能会搜出不同版本的clearfix，有的代码比上图中的代码多，你不用理会它，就按照我的贴图的代码写就行。

         注意：clearfix 一般要应用在包含浮动子元素的父级元素上

　　究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。

2. 合理的使用float布局网页

　　《上篇》中提到，我们使用float做网页布局，是一种误解和“误用”。估计大多数人误解了float的原本设计初衷，但是这里的“误用”是要加引号的，因为这是一种无心插柳的应用。即，用float做网页布局是很合情合理的，鼓励同志们继续使用。

　　但是用float做网页布局也是有许多技巧的，准确的应用会提高网页的灵活性。下面我列举两个常用的网页布局案例，仅供大家参考，不喜勿喷，善意留言！

　　

　　第一，三列布局

　　博客园的主页就是经典的三列布局，很明显的左、中、右。

　　

　　对于这种布局，我给出的布局方案是：

　　

 

　　第二，两列布局

　　以博客园一篇文章的链接为例，它分为左、右结构

　　

　　对于这种布局的格式，我的设计方案是：

　　

3. BootStrap的栅格系统

　　如果您熟悉并使用bootstrap，那么您将不必自己去操心网页布局，因为bootstrap已经把网页分成了12列，您可以随意设置多列布局，非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统，就是简单看看栅格系统的实现，它是用float实现的。

　　

　　通过浏览器监控每个单元格的css样式，可以发现，单元格通过百分比设置了宽度，通过float:left设置了浮动。

　　

　　对于父元素的清除浮动，bootstrap使用的就是《上篇》中说的clearfix，大家可以自行检测一下试试。

　　多看看经典软件的源码是学习的一个捷径，学习css可以看看bootstrap，学习js可以看看jquery……

4. 总结

　　float内容非常多，有的css书籍中，也很难全面的讲解float这一知识点的全部内容。这就需要自己去多多看书，多多实践，多多看经典系统的源码，才能做到融会贯通，举一反十。