浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。（这个很重要，说明了浮动停止的条件）
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS 浮动
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像：
看下面的：
div{
width:500px;
height:200px;
font-size:3em;
text-align:center;
border:5px solid black;
margin:10px;
background:lime;
}
#content1{
float:left;
background:red;
}
</style>
</head>
<body>
<div id="content1"> 1</div> <p>bullshit</p>
<div id="content2">2</div>
<div id="content3">3 hello world</div>
</body>显示如下：
第二个div被第一个div挡住了。文字bullshit在第一个浮动的div的左边，如果给<p> bullshit </p>加上标签<div> </div>
那么bullshit的div会被float的div挡住。虽然div被第一个div挡住了，但是文字始终在float div的右边。
<style type="text/css">
#test{
width:200px;
height:300px;
background:#333;
float:left;
}
#para{
width:300px;
height:310px;
background:red;
}
</style>
</head>
<body>
<div id="test"> </div><div id="para"> speaon ssffd<p> hello world </p></div>
</body>
speaon ssffd和hello world都在float div的右边。如下：
要想阻止行框围绕浮动框，需要对该框应用 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 不占据空间。
如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：
不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。
没有清楚浮动之前：
可以看到，我们设置的div背景没有起到作用。 而且边框没有包围图像。清除浮动后。
可以看到，整个背景和border都出来 了。
不过我们还有另一种办法，那就是对容器 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>这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。
事实上，W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的
我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边 下图阐明了其原理：
举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：
实现上面效果：
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
要实现图片向左浮动、而且被文字环绕的效果，你只需先设定图片所在盒子的宽度，然后再把CSS属性float设为left即可：
#picture {
float:left;
width: 100px;
}
CSS属性clear用于控制浮动元素的后继元素的行为。
缺省地，后继元素将向上移动，以填补由于前面元素的浮动而空出的可用空间。在前面的例子中，文本自动上移到了比尔盖茨的图片旁。
clear属性的值可以是left、right、both或none。原则是这样的：如果一个盒子的clear属性被设为“both”，那么该盒子的上边距将始终处于前面的浮动盒子（如果存在的话）的下边距之下。
浮动元素所说的不占据空间，到底是什么空间？关于空间，我的理解有2种：
（1）行框空间
一个行框自身的宽度是由其包含的行内框的尺寸决定的，而行内框的尺寸无疑就是因为其包含的文字等决定的。行框最大的宽是父容器的宽度。
更多看原文。
另一篇：
A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box.
Where will a floated element move to?
Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.这是很重要的一段。
Do floated items need a width?
You should always set a width on floated items (except if applied directly to an image - which has implicit width). W3C's Cascading Style Sheets, level 2, CSS2 Specifications states:
If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.
Elements above and below floated elements
Block level elements above a floated element will not be affected by it. However, elements below will wrap around 缠绕 the floated element:
Borders, background images and background color
While content will wrap around a floated element, border, background image and background color will extend underneath.
-
If you do not want elements below a floated element to wrap around it, you can apply the clear property to the following element using "clear: left", "clear: right" or "clear: both".
