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