CSS 布局 - 浮动实例 详解
css3基础 2022-05-23 12:04:33小码哥的IT人生shichen
CSS 布局 - 浮动实例
本页提供常见的浮动案例。
网格 / 等宽的框
Box 1
Box 2
Box 1
Box 2
Box 3
通过使用 float 属性，可以轻松地并排浮动内容框：
示例代码：
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
padding: 50px; /* 如果需要在图片间增加间距 */
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h1>网格框</h1>
<p>并排浮动的框：</p>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<p>框中的一些文本。</p>
</div>
<div class="box" style="background-color:#ccc">
<p>框中的一些文本。</p>
</div>
<div class="box" style="background-color:#ddd">
<p>框中的一些文本。</p>
</div>
</div>
<p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性，以确保框不会由于额外的内边距（填充）而损坏。尝试删除此代码以查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
什么是 box-sizing？
您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。
您可以在我们的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。
图像并排
这种框格（The grid of boxes）也可以用来并排显示图像：
示例代码：
.img-container {
float: left;
width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
padding: 5px; /* 如果需要在图片间增加间距 */
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h1>并排的图像</h1>
<p>并排浮动图像：</p>
<div class="clearfix">
<div class="img-container">
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width:100%">
</div>
<div class="img-container">
<img src="/i/photo/tulip-2.jpg" alt="Tulip" style="width:100%">
</div>
<div class="img-container">
<img src="/i/photo/flower-4.jpg" alt="Flower" style="width:100%">
</div>
</div>
<p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性以确保图像容器不会由于额外的内边距（填充）而损坏。请尝试删除此代码以查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
等宽的框
在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：
Box 1
Some content, some content, some content
Box 2
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
示例代码：
.box {
height: 500px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 50%;
padding: 50px;
height: 300px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h1>等高框</h1>
<p>有相同高度的浮动框：</p>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<h2>Box 1</h2>
<p>Some content, some content, some content</p>
</div>
<div class="box" style="background-color:#ccc">
<h2>Box 2</h2>
<p>Some content, some content, some content</p>
<p>Some content, some content, some content</p>
<p>Some content, some content, some content</p>
</div>
</div>
<p>这个例子不是很灵活。如果可以保证框中始终有相同数量的内容，则可以使用 CSS 高度，但并非总是如此。如果您在手机上尝试上例（或调整浏览器窗口的大小），则会看到第二个框的内容将显示在框的外部。</p>
<p>如果这不是您想要的，请返回教程并学习另一个解决方案。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：
示例代码：
使用 Flexbox 创建弹性框：
Box 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。
Box 2 - 我的高度将跟随框 1。
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container .box {
background-color: #f1f1f1;
width: 50%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>弹性框</h1>
<div class="flex-container">
<div class="box">框 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。</div>
<div class="box">框 2 - 我的高度与框 1 保持一致。</div>
</div>
<p>请尝试调整浏览器窗口的大小，以查看弹性布局。</p>
<p><b>注释：</b>Internet Explorer 10 或更早的版本不支持 Flexbox。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 CSS Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。
导航菜单
将 float 与超链接列表一起使用，来创建水平菜单：
示例代码：
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Web 布局实例
使用 float 属性完成整个 Web 布局也很常见：
示例代码：
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Shanghai</h1>
</div>
<div class="clearfix">
<div class="column menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="column content">
<h1>The City</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
<p>You will learn more about web layout and responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
更多实例
完整实例【带有边框和外边距的图像浮动到段落的右侧】：
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
border: 1px dotted black;
margin: 0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
在下面的段落中，图像将向右浮动。黑色的虚线边框被添加到图像。
我们还为图像添加了外边距以将文本推离图像：
图像的上、右外边距为 0px，下外边距为 15px，左外边距为 20px。
</p>
<p><img src="/skin/news/images/logo1.png" width="188" height="267">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
让图像浮动到段落的右侧。在图像上添加边框和外边距。
完整实例【带标题的图像浮动到右侧】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: right;
width: 120px;
margin: 0 0 15px 20px;
padding: 15px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="/skin/news/images/logo1.png" width="188" height="267"><br>CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，div 元素的宽度为 120 像素，其中包含图像。
div 元素将向右浮动。外边距被添加到 div 以将文本推离 div。
将边框和内边距（填充）添加到 div 中，以凸显图片和标题。
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
让带有标题的图像向右浮动。
完整实例【让段落的第一个字母向左浮动】：
<!DOCTYPE html>
<html>
<head>
<style>
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
</style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，文本的第一个字母嵌入 span 元素中。
span 元素的宽度是当前字体大小的 0.7 倍。
span 元素的字体大小为 400％（很大），行高为 80％。
span 中字母的字体将是 "Algerian"。
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
让段落的第一个字母向左浮动并设置该字母的样式。
完整实例【用浮动创建一个网站】：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<ul class="topmenu">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="clearfix">
<div class="column sidemenu">
<ul>
<li><a href="#flight">The Flight</a></li>
<li><a href="#city" class="active">The City</a></li>
<li><a href="#island">The Island</a></li>
<li><a href="#food">The Food</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#history">The History</a></li>
<li><a href="#oceans">The Oceans</a></li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Shanghai</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用浮动创建带有水平导航栏、页眉、页脚、左侧导航栏和主要内容的首页。
所有 CSS 浮动属性
| 属性 | 描述 |
|---|---|
| box-sizing | 定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。 |
| clear | 指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。 |
| float | 指定元素应如何浮动。 |
| overflow | 指定如果内容溢出元素框会发生什么情况。 |
| overflow-x | 指定当溢出元素的内容区域时，如何处理内容的左/右边缘。 |
| overflow-y | 指定当溢出元素的内容区域时，如何处理内容的上/下边缘。 |
