CSS 布局 - 浮动和清除 详解
CSS 布局 - 浮动和清除
CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。
实例 - float: right;
下例指定图像应在文本中向右浮动：
领先的 Web 技术教程 - 全部免费。在 phpcodeweb，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 phpcodeweb，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
示例代码：
img {
float: right;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h1>向右浮动</h1>
<p>在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>
<p><img src="/i/logo/w3logo-3.png" alt="phpcodeweb" style="width:170px;height:170px;margin-left:15px;">
领先的 Web 技术教程 - 全部免费。在 phpcodeweb，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 phpcodeweb，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
实例 - float: left;
下例指定图像应在文本中向左浮动：
领先的 Web 技术教程 - 全部免费。在 phpcodeweb，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 phpcodeweb，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
示例代码：
img {
float: left;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h1>向左浮动</h1>
<p>在本例中，图像会在段落中向左浮动，而段落中的文本会包围这幅图像。</p>
<p><img src="/i/logo/w3logo-3.png" alt="phpcodeweb" style="width:170px;height:170px;margin-right:15px;">
领先的 Web 技术教程 - 全部免费。在 phpcodeweb，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 phpcodeweb，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
实例 - No float
在下例中，图像将显示在文本中刚出现的位置（float: none;）：
领先的 Web 技术教程 - 全部免费。在 phpcodeweb，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。 我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。 在 phpcodeweb，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
示例代码：
img {
float: none;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<h1>没有浮动</h1>
<p>在本例中，图像将显示在文本中刚出现的位置（float: none;）。</p>
<p><img src="/i/logo/w3logo-3.png" alt="phpcodeweb" style="width:170px;height:170px;">
领先的 Web 技术教程 - 全部免费。在 phpcodeweb，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 phpcodeweb，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
