标签盒子、标签、标签、标签等html标签)的浮动布局，浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。

中文名

CSS浮动

外文名

cssfudong

属性

float 属性实现元素的浮动功    能

浮动的框可以向左或向右移动

clear应用

对容器 div 进行浮动

作    用

这有助于减少或消除不必要的标记

CSS浮动CSS浮动

语音

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

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

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

css浮动图示2

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

css浮动图示3

CSS浮动float 属性

语音

在 CSS 中，我们通过 float 属性实现元素的浮动。

如需更多有关 float 属性的知识，请访问参考手册：CSS float 属性。

行框和清理

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

因此，创建浮动框可以使文本围绕图像：

css浮动图示4

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

css浮动图示

这是一个有用的工具，它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

这种情况下，出现了一个问题：因为浮动元素脱离了文档流，所以包围图片和文本的 div并不占据空间。这点从图片中可以很清楚的看到，div的框并没有包裹住图片和文本。

那么如何让父类包围元素在视觉上包围浮动子元素呢？或者，更抽象层次的说，当一个盒子内部的子盒子由于设置了float属性导致父类盒子无法被撑开，如何撑开父类盒子呢？我们可以对某个元素使用clear:both撑开父类盒子：

css浮动图示

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

.clear {

clear: both;

}

CSS浮动clear应用

语音

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法，那就是对容器 div 进行浮动：

.news {

background-color: gray;

border: solid 1px black;

float: left;

}

.news img {

float: left;

}

.news p {

float: right;

}

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。

CSS浮动清除浮动

语音

在上面的叙述中，我们遇到过父类盒子没有被撑开的情况，这是由于子类盒子设置了float:left或float:right或两者都有的属性，这种情况可能会产生一些我们不希望看到的情况：

(1)、背景不能显示

由于浮动产生，如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

(2)、边框不能撑开

如果父级设置了CSS边框属性(css border)，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

(3)、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

由于这些负面情况的出现，我们有个时候希望能清除浮动，一般有以下两个方法：

(1)对父级设置适合高度样式清除浮动。

(2)新引入一个空的子元素，运用clear:both样式清除浮动。

[1]

词条图册

更多图册

参考资料

1.

css浮动

．w3school[引用日期2013-04-18]