深刻解析 float

时间 2019-11-10

标签深刻解析 float 栏目 CSS 繁體版

原文原文链接

0.前言

float属性在css2中是一个热门的属性，被普遍应用于布局之中，同时因为不当使用float带来的问题也很是多，本文结合本身对float的理解以及实际项目中碰到float的相关问题，作一个详细总结，欢迎一块儿探讨，但未经赞成禁止转载。如下是文章的目录css

float的特性html
float与absolute的区别bootstrap
float与inline-block框架
清除浮动的方法及优缺点dom

1. float的特性

文字环绕

float 最先的设计目的是用于图片，使文字可以环绕在图片周围，像下面这样：ide

文字环绕效果是很明显的，这里要注意一个地方:浮动的块虽然脱离的正常的文档流，可是还会占有正常文档流的文本空间，能够看到上面第二种图，p的区域实际上是顶到了img的底下的，由于float让img脱离文档流，可是p上的文字却没有顶过去，也就是说p上的一部分文字空间仍然被img占据着，因此从这里也能够看出float的脱离文档流不是彻底脱离。布局

包裹性

所谓的包裹性是指，使用float的元素会自动加上一个块级框，也就是能够像块级元素那样设置宽高
，例子以下：ui

破坏性

float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素，spa

能够看到图中名为taxian的元素高度为0。这个特性也正是它可以实现文字环绕的缘由，可是因为后来float被大量应用到页面布局之中，因此这个咱们不得不想办法清除浮动，这个在下文会有提到。设计

2. float和position:absolute

脱离文档流

虽然在咱们经常看到描述float和absolute的时候，都陈伟脱离文档流，可是实际上并不彻底相同：
在脱离文档流方面，absolut正如它的名字通常，是绝对脱离，设置了该属性的元素，将彻底独立在文档流以外，不会对其余的元素产生任何影响，就举上面文字环绕的例子来讲，若是把img属性的float换成position：absolue属性的话，那么p元素以及上面的文字都会顶到图片的位置上，就像这样:

而对于float咱们以前已经提出，float只是脱离了文档流的dom空间可是还占据着文字空间（这两个名词不知道是否已经有更标准的词语出现，在这里只是我的用法，见谅）

高度塌陷

float和absolute都能引发父元素的高度塌陷，一样地，因为absolute是彻底脱离文档流，因此这种状况的高度塌陷是没办法清除的；float引发的高度塌陷则是可清除的，咱们常说的清除浮动就是指清除float带来的高度塌陷问题，在下文会有提到。

在两列布局中的使用

float和absolute都被普遍用于两列布局之中，absolute因为彻底脱离，能够作到精准的定位，可是不利于设计两列之间的联动变化；float属性能够保留一些相互影响，可是要很是当心传递来的问题，好比clear的不当使用会致使左右布局异常联动，在后面讲清除浮动时会专门讲解。并且在使用浮动布局的时候，要注意某些状况下要交换浮动左右浮动元素的声明次序。

3. float和display:inline-block

横向排列

首先，使用float和inline-block都能使li横向排列。可是，使用float能够选择排列的方向,而inline只有一种方向；
第二是在单纯排列图片的时候，若是图片大小不是彻底一致的，那么使用这两个属性都能完成比较合适的排列：

可是若是图片大小不等高，float的脱离文档流特性致使排列的某些图片会被挤到下一行，致使垂直方向没法对齐，以下：

而若是使用display：inline-block则能够保证垂直方向的对齐：

因此若是是要保证垂直对齐的状况下，使用display:inline-block会比较合适

float和displayinline-block这两个属性有一个很常常用到的地方就是横向导航。导航中通常是单行对齐，并且除了图片以外还有文字，这时候若是采用display:inline-block，必需要考虑display:inline-block属性带来的空白间隙问题(这个问题能够自行查找，本文中不赘述)，此时使用float:left更为合适一些。

4.关于清除浮动

清除浮动的方式

前文中提到float属性会引发父容器高度塌陷的问题，所以咱们须要清除浮动。

在阅读这块内容以前，请先了解css中的BFC(这个问题能够自行查找，本文中不赘述)，在此基础上，我认为清除浮动，根据原理来划分，分为两类：

利用clear属性清除浮动
利用bfc原理包容浮动

首先介绍第一类，利用clear原理清除浮动，若是你们有过经验都知道，一般利用clear属性清除浮动的方式有两种：

利用添加空标签清除浮动
经过after伪类清除元素

这两种方式只是写法上有所不一样，经过伪类清除可让代码比较简洁，而且符合语义化的原则（其实就是能够少写无心义的空标签）如今比较流行的bootstrap框架或者其余各大框架中，一般使用一下代码来清除：

.clearfix:before,
.clearfix:after
{
  display: table;
  content: " ";
}
.clearfix:after
{
  clear: both;
}
.clearfix{zoom:1;} //ie 6 7

其实这里起清除浮动的做用的是只是

.clearfix:after
    {
      content: " ";
      clear: both;
    }

至于before和after中的display:table;是为了防止子元素垂直方向上的边距折叠，也就是一般说的子元素margin-top会被转移到父元素的问题（为防止篇幅过长这个问题也不在此解释，若是有须要能够私信回答）。

因此以上的效果就至关于在父元素最后插入一个子元素，而且设置clear:both属性，这是如今最通用的办法，可是其实并没有是天衣无缝的

clear使用不当的例子

（这里为何用了大号呢，由于这个问题很重要！很重要！很重要！）

举一个以前项目中碰到的一种状况，为了方便你们理解，在这里把模型简化,代码以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        .div1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightpink;
        }
        .div2{
            margin-left:100px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
        <div class="div1">
        这是div1
        </div>
        <div class="div2">
            <div style="float:left">这是一个浮动的标题</div>
            <div style="clear:both"></div>
        </div>
</body>
</html>

这段代码是一个很是简单的左右两列布局，在右边内部有个浮动的标题，因而在后面跟上一个清除浮动的子元素（这里采用空标签只是为了在研究问题的时候排除伪类元素的干扰），可是存在一个问题：右边的div2会自动适应div1的高度，或者说清除浮动的容器会有高度，咱们能够在f12中直接改变左边div1的高度，能够看到右边的高度也随之改变。

这种状况有不少方法能够处理，好比让div2造成一个bfc容器，可是不多看到有文章讲到问题的根源，我查了好久，最后发现问题是源于clear这个属性上设计：

clear:
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

clear:both
Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document

以上是w3c文档上关于clear和clear:both的描述，大概有如下两个重点：

clear清除浮动对于其余造成bfc的块内部的浮动元素是无效的
clear清除浮动的原理是：让添加了clear属性的那个元素的top边缘在某侧或者两侧（看设置的值是left right仍是both）浮动元素的底边距之下。

其实这个很好理解，咱们之因此可以使用clear解决float引发的父元素塌陷问题，其实就是由于加了clear的空标签或者是那么伪类元素，把top值设置在了浮动元素的bottom边缘下方，从而可以撑起父元素。

因此最后咱们就知道上面的问题出在哪里了：clear是清除某侧或者两侧的全部浮动，结合上面那个例子来看，实际上是有两处浮动的，第一是左侧的div1，第二是在div2内部有个浮动的标题，咱们的目的是要清除内部的浮动，可是由于clear自己的定义，就把两个浮动都清除了，也就是把加了clear属性的标签top值设置了浮动元素的bottom边缘下方，因此，那个块将会和左侧等高（实质应是设置了clear空标签的高度为0而且top恰好在div的下方）。

总结

上面的一段说的有点拗口，不知道你们有没有理解，不过能够拿例子去跑一下，应该就很容易理解了。
既然问题找到了，那相应的解决方案也就出来了：

左侧使用absolute布局避开这个问题
给右侧div2添加overflow:auito造成bfc，从而隔离clear的做用范围

如今回到清除浮动的问题主线，关于使用bfc包含浮动的状况，了解了bfc特色后咱们就知道bfc的内部是会计算浮动元素的高度的，因此直接给浮动元素父元素加上overflow:auto或者其余能够构成bfc的属性便可。

以上内容为查阅相关资料之后，结合经验的我的总结，可能有理解不到位之处，欢迎指出和讨论，同时再次声明未经容许不得转载！！