float是css样式中的定位属性，用于设定标籤对象（如<div>标籤盒子、<span>标籤、<a>标籤、<em>标籤等html标籤）的浮动布局，浮动也就是我们所说标籤对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
基本介绍
- 中文名CSS浮动
- 外文名cssfudong
- 属性float 属性实现元素的浮动
- 功能浮动的框可以向左或向右移动
- clear套用对容器 div 进行浮动
- 作用这有助于减少或消除不必要的标记
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的框线为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那幺框 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的框并没有包裹住图片和文本。
那幺如何让父类包围元素在视觉上包围浮动子元素呢？或者，更抽象层次的说，当一个盒子内部的子盒子由于设定了float属性导致父类盒子无法被撑开，如何撑开父类盒子呢？我们可以对某个元素使用clear:both撑开父类盒子
不幸的是出现了一个新的问题，由于没有现有的元素可以套用清理，所以我们只能添加一个空元素并且清理它。
.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套用
这样可以实现我们希望的效果，需要添加多余的代码。常常有元素可以套用 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样式清除浮动。