CSS属性是布局非常重要的属性。它允许您完全按照您希望的方式显示网页设计 - 但为了使用它，您必须了解它的工作原理。
在样式表中，CSS float属性如下所示：
.right {float：right; }
这告诉浏览器，“right”类的所有内容都应该向右浮动。
你会像这样分配它：
class =“right”/>
你可以用CSS浮动属性浮动什么？
您不能在网页上浮动每个元素。您只能浮动块级元素。这些是占据页面空间块的元素，如images（），paragraph（），division（）和lists（）。
影响文本但不在页面上创建框的其他元素称为内联元素，不能浮动。这些是诸如span（），换行符（），强调（）或斜体（）之类的元素。
他们在哪里漂浮？
您可以将元素浮动到右侧或左侧。跟随浮动元素的任何元素将围绕另一侧的浮动元素流动。
例如，如果我将图像浮动到左侧，则跟随它的任何文本或其他元素将围绕它向右流动。如果我将图像浮动到右侧，则跟随它的任何文本或其他元素将围绕它向左流动。将显示放置在文本块中而没有应用任何浮动样式的图像，但浏览器将设置为显示图像。这通常是在图像底部显示以下文本的第一行。
他们会浮多远？
已浮动的元素将尽可能远地移动到容器元素的左侧或右侧。这会导致几种不同的情况，具体取决于代码的编写方式。对于这些例子，我将浮动一个小 DIV 左边的元素：
- 如果浮动元素没有预定义的宽度，则无论浮动如何，它都将占用所需和可用的水平空间。注意：某些浏览器尝试在未定义宽度时将元素放在浮动元素旁边 - 通常只为非浮动元素提供少量空间。所以你应该 总是定义一个宽度 浮动元素。
- 如果容器元素是HTML元素，则浮动
DIV将位于页面的左边缘。 - 如果容器元素本身包含其他东西，则浮动
DIV将坐在容器的左边缘。 - 你可以嵌套浮动元素，这可能导致浮动结束在一个令人惊讶的地方。例如，这个浮子是左浮动的
DIV右侧浮动DIV. - 如果容器中有空间，浮动元素将彼此相邻。例如，这个容器有三个100px宽
DIV元素漂浮在400px宽的容器中。
您甚至可以使用浮动来创建照片库布局。你把每个缩略图（当它们都是相同大小时效果最好）放在一个 DIV 随着标题和浮动 DIV 容器中的元素。无论浏览器窗口有多宽，缩略图都会统一排列。
关掉浮子
一旦你知道如何让一个元素浮动，重要的是知道如何关闭浮动。您使用CSS clear属性关闭浮动。您可以清除左浮动，右浮动或两者：
清楚：左;明确：对;明确：两者;
您为其设置clear属性的任何元素都将显示在浮动该方向的元素下方。例如，在此示例中，前两段文本未清除，但第三段是。
使用文档中不同元素的清晰值来播放，以获得不同的布局效果。最有趣的浮动布局之一是在文本段落旁边的右侧或左侧列中的一系列图像。即使文本不够长以滚动浏览图像，您也可以在所有图像上使用清除，以确保它们出现在列中而不是上一个图像旁边。
HTML（重复此段落）：
Duis aute irure dolor sed在rephenderit举行的eiusmod tempor incididunt。 Cupidatat non proident，ut labore et dolore magna aliqua。
CSS（将图像浮动到左侧）：
img.float {float：left; 明确：左; 保证金：5px的;}
在右边：
img.float {float：right; 明确：右; 保证金：5px的;}
使用Floats进行布局
一旦你明白了 浮动 属性有效，您可以开始使用它来布局您的网页。这些是我创建浮动网页的步骤：
- 设计布局（在纸上或图形工具中或在我脑海中）。
- 确定页面分区的位置。
- 确定各种容器及其中元素的宽度。
- 浮动一切。即使最外层的容器元素也浮动到左侧，这样我就知道它与浏览器视图端口的关系。
只要知道布局部分的宽度（百分比很好），就可以使用 浮动 将它们放在页面上的属性。好消息是，您不必担心Internet Explorer或Firefox的盒子模型不同。
