通过前面标准文档流的介绍，我们知道一个块级元素在水平方向可以自动伸展，但是在竖直方向只能和兄弟元素依次排列，不能并排，但是通过浮动，我们可以设计更加不一样的页面风格，那么什么是盒子浮动呢？
盒子的浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
下面通过一些图例为大家展示下：
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
提醒：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
还有我们可以使用clear属性清除浮动框的影响。clear属性除了可以设置left或是right之外，还可以设置为both，表示同时消除两边的影响。
例子：让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。如图：
那么如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear，不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。如图：
phplife.net提醒：在使用空元素清除浮动的影响时，必须指明该空元素的父级。