float是css样式中的定位属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

float 属性
在 CSS 中，我们通过 float 属性实现元素的浮动。如需更多有关 float 属性的知识，请访问参考手册：CSS float 属性。行框和清理浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

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

这是一个有用的工具，它让周围的元素为浮动元素留出空间。让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：.news {background-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并不占据空间。这点从图片中可以很清楚的看到，div的框并没有包裹住图片和文本。

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。.news {background-color: gray;border: solid 1px black;}.news img {float: left;}.news p {float: right;}.clear {clear: both;}<div class="news"><img src="news-pic.jpg" /><p>some text</p><div class="clear"></div></div>

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。不过我们还有另一种办法，那就是对容器 div 进行浮动：.news {background-color: gray;border: solid 1px black;float: left;}.news img {float: left;}.news p {float: right;}<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

在上面的叙述中，我们遇到过父类盒子没有被撑开的情况，这是由于子类盒子设置了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样式清除浮动。