深刻理解css之float

前言

在css中，是存在流的概念的。在正常状况下，页面老是从左到右，从上到下布局，这种被称为正常的流。可是有不少状况，正常流是没办法实现的，所以咱们须要一些手段来破坏流，从而实现一些特殊的布局，而本节的主角float就具有破坏流的特性。

float设计的初衷

不少新手在布局的时候，总喜欢用float来实现。例如一个三栏布局，左右固定，中间自适应，有些人会经过float来一列一列把它们砌起来。这样的布局极其容易崩溃，只要高度或者宽度稍微有些变化，整个页面都会错乱。所以float设计的初衷并非用来布局的，其本意仅仅是实现图片文字环绕效果，即图片左浮动，文字环绕图片，以下图所示：

.float {
    width: 150px;
    float: left;
}
.content {
    width: 400px;
}

<div>
    <img src="./card.jpg" alt="" class="float">
    <p class="content">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
</div>

float的特性

一个元素设置了float属性，会表现出以下特性：

• 包裹性
• 块状格式化上下文
• 破坏文档流
• 没有margin合并

包裹性

包裹性包含了包裹和自适应两个特性。

包裹指的是一个浮动元素，若是子元素宽度足够小，则浮动元素的宽度就是该子元素的宽度，以下所示：

.float {
    float: left;
}

<p class="float">
    <span>这是浮动元素的子元素</span>
</p>

自适应指的是若是浮动元素的父元素有设置宽度，而且浮动元素的子元素宽度超出了父元素，则浮动元素的宽度最终表现为父元素的宽度，以下所示：

.father {
    width: 100px;
}

.float {
    float: left;
}

<div class="father">
    <p class="float">
        <span>这是浮动元素的子元素</span>
    </p>
</div>

块状格式化上下文

设定了float的元素，其display的最终值会表现为block或者table，具体转换以下表：

设定值	计算值
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block

所以，设置了float的元素，下面的写法是多余的：

.float {
        float: left:
        display: block;
    }

    .float {
        float: left;
        vertical-align: middle; /* 不起做用 */
    }

格式化上下文属于BFC的内容，此处先不展开。

破坏文档流

这是float最本质的特性，所以float设计的初衷就是破坏文档流。设置float的元素，会致使父元素高度塌陷，咱们来看个例子：

.float {
    float: left;
}

<div class="father">
    <img src="./card.jpg" alt="" class="float">
</div>
<p>
    文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
</p>

能够看到，父元素的高度为0，但这不是bug，而是float自己就是这样设计的，所以只有让父元素高度塌陷了，后面的元素才有机会浮上来。可是仅仅是这样仍是不能够造成图片环绕效果的，否则文字浮上来就只会覆盖在图片上面。这里面还隐藏着一个特性：

• 行框盒子和浮动元素的不可重叠性

意思是说行框盒子和浮动元素不会发生重叠，所以，下面的文字浮上去以后才不会覆盖在图片之上。即便咱们给文字设置margin负值也不会起做用。

没有margin合并

设置了float的元素，因为造成了BFC，所以也就没有了margin合并。

float做用机制

咱们先来看个例子：

.float {
    float: right;
}

<div>
    <span>标题</span>
    <a class="float">连接</a>
</div>

在标准浏览器下，“标题”和“连接”会在同一行展现，而且“连接”会浮动在右边。可是若是“标题”很是长，一行放不下呢，“连接”是浮动在第一行仍是第二行呢？答案是第二行，要想解释这个，咱们得先理解两个概念，一个是“浮动锚点”，一个是“浮动参考”：

• 浮动锚点是float元素所在的“流”中的一个点，这个点自己并不浮动，表现得就像是一个没有margin、padding和border的空的内联元素。
• 浮动参考指的是浮动元素对齐参考的实体。

float元素的“浮动参考”是行框盒子，也就是float元素在当前“行框盒子”内定位，所以，上面的例子“连接”会在第二行展现。可是也有一种状况是，浮动元素先后并无内联元素，所以也就不存在行框盒子，这时候就是“浮动锚点”在起做用。由于“浮动锚点”表现得像一个内联元素，有内联元素，天然就有行框盒子，只是这个盒子看不见也摸不着罢了。

float实现流体布局

前面文字环绕的例子，只要稍微改造一下就能够实现两栏或多栏的自适应布局，代码以下：

.father {
    overflow: hidden;
    height: 200px;
}

.float {
    float: left;
    width: 100px;
}

.content {
    margin-left: 120px;
}

<div class="father">
    <img src="./card.jpg" alt="" class="float">
    <p class="content">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
</div>

总结

• float设计的初衷不是布局，而是文字环绕效果
• float的特性：包裹性、块状格式化上下文、破坏性、没有margin合并
• float的机制：浮动锚点和浮动参考
• float实现自适应布局的思路