CSS指北——浮动(Floating)规则详解

1. 前言

很长一段时间以来，浮动元素是我们所有web布局方案的基础。尽管如今主流的布局方案为弹性盒布局和栅格布局，但浮动仍是布局中常用的方法。浮动的概念很简单，向左浮动、向右浮动或者不浮动，但深究其详细规则却不容易。(浮动的用法传送门)

2. 包含块(containing block)

在开始深入研究浮动的细节之前，首先要建立一个包含块(containing block)的概念。浮动元素的包含块是最近的块级祖先元素。因此下面的标记中，浮动元素<img>的包含块是包含它的父级块元素<p>。此外，设为浮动的元素也会自动变为块元素"display:block;"，浏览器自动忽略其他的display值。

<p>
This is paragraph text, but you knew that. Within the content of this
paragraph is an image that's been floated