深入了解float之“不完全脱离文档流”

本文目录：

float的特性

浮动机制

float实现流体布局

float与absolute的区别

float与inline-block

清除浮动的方法及优缺点

---

1. float的特性

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

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

文字环绕(设计初衷)

float最早的设计目的是用于图片，使文字能够环绕在图片周围，像下面这样：


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

包裹性

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

所谓的包裹性是指，使用float的元素会自动加上一个块级框，也就是可以像块级元素那样设置宽高，例子如下：
如果子元素宽度足够小，则浮动元素的宽度就是该子元素的宽度，如下所示：

.float {
    float: left;
}

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