浮动的框可以向左或向右挪动，直到它的外边沿碰到搜聚框或另外一个浮动框的边框为止。

由于浮动框不在文档的寻常流中，所以文档的平庸流中的块框表现得就像浮动框不具有同样。

CSS 浮动

请看下图，当把框 1 向右浮动时，它脱离文档流而且向右移动，直到它的右侧缘碰着包括框的右边际：

再请看下图，当框 1 向左浮动时，它脱离文档流而且向左挪动，直到它的左边沿遇到征求框的左边沿。因为它不再处于文档流中，所以它不占据空间，实践上掩盖住了框 2，使框 2 从视图中消失。

如果把悉数三个框都向左移动，那末框 1 向左浮动直到遇到包括框，其它两个框向左浮动直到遇到前一个浮动框。

下列图所示，如果包罗框太窄，无奈包涵程度分列的三个浮动元素，那末其它浮动块向下移动，直到有短缺的空间。如果浮动元素的高度分歧，那么当它们向下移动时或是被其它浮动元素“卡住”：

CSS float 属性

在 CSS 中，我们颠末 float 属性完成元素的浮动。

如需更多有关 float 属性的知识，请会晤参照手册：CSS float 属性。

行框与清算

浮动框旁边的行框被膨胀，从而给浮动框留出空间，行框围绕浮动框。

因此，建设浮动框可以使文本环抱图象：

要想阻止行框围绕浮动框，重要对该框使用 clear 属性。clear 属性的值可所以 left、right、both 或 none，它体现框的哪些边不理当挨着浮动框。

为了完成这类成果，在被清算的元素的上外边距上增加欠缺的空间，使元素的顶边沿垂直下降到浮动框上面：

这是一个有用的器械，它让四周的元素为浮动元素留出空间。

让咱们更详细地看看浮动与清理。若是希望让一个图片浮动到文本块的左边，何况渴望这幅图片和文本包孕在另一个具有配景色调与边框的元素中。您也许编写下面的代码：

.news {
  bac千克round-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这类情况下，出现了一个标题。由于浮动元素来到了文档流，所以得救图片和文本的 div 不据有空间。