CSS 布局 - 浮动示例
此页面包含常见的浮动示例。
盒子网格 / 等宽盒子
盒子 1
盒子 2
盒子 1
盒子 2
盒子 3
使用 float 属性，可以轻松地将内容框并排浮动
示例
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 三个盒子 (对于四个使用 25%，对于两个使用 50% 等) */
padding: 50px; /* 如果要在图片之间留出空间 */
}
动手试试 »
什么是盒尺寸？
您可以轻松地并排创建三个浮动盒子。但是，当您添加任何会扩大每个盒子宽度的东西（例如内边距或边框）时，盒子会断裂。 box-sizing 属性允许我们将内边距和边框包含在盒子的总宽度（和高度）中，确保内边距保持在盒子内部，并且不会断裂。
您可以在我们的 CSS 盒尺寸章节 中了解更多关于盒尺寸属性的信息。
并排图片
盒子网格也可以用于并排显示图片
示例
.img-container {
float: left;
width: 33.33%; /* 三个容器 (对于四个使用 25%，对于两个使用 50% 等) */
padding: 5px; /* 如果要在图片之间留出空间 */
}
动手试试 »
等高盒子
在前面的示例中，您学习了如何并排浮动宽度相等的盒子。但是，要创建高度相等的浮动盒子并不容易。然而，一个快速解决方法是设置一个固定高度，就像下面的示例一样
盒子 1
一些内容，一些内容，一些内容
盒子 2
一些内容，一些内容，一些内容
一些内容，一些内容，一些内容
一些内容，一些内容，一些内容
但是，这不太灵活。如果您能保证盒子始终包含相同数量的内容，那就没问题。但很多时候，内容并不相同。如果您在手机上尝试上面的示例，您会看到第二个盒子的内容将显示在盒子外面。这就是 CSS3 弹性盒派上用场的地方 - 因为它可以自动拉伸盒子，使其与最长的盒子一样长
示例
使用 弹性盒 创建灵活的盒子
提示: 您可以在我们的 CSS 弹性盒章节 中了解更多关于弹性盒布局模块的信息。
导航菜单
您还可以使用 float 与超链接列表一起创建水平菜单
网页布局示例
使用 float 属性完成整个网页布局也很常见
示例
.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%;
}
动手试试 »
更多示例
一个带有边框和外边距的图片，在段落中浮动到右侧
让一个图片在段落中浮动到右侧。为图片添加边框和外边距。
一个带有标题的图片，浮动到右侧
让一个带有标题的图片浮动到右侧。
让段落的第一字母浮动到左侧
让段落的第一字母浮动到左侧，并为字母设置样式。
使用浮动创建网站
使用浮动创建包含导航栏、页眉、页脚、左侧内容和主要内容的首页。
所有 CSS 浮动属性
| 属性 | 描述 |
|---|---|
| box-sizing | 定义如何计算元素的宽度和高度：是否应该包含内边距和边框。 |
| clear | 指定浮动元素旁边的元素应该发生什么。 |
| float | 指定元素是否应该浮动到左侧、右侧，或者根本不浮动。 |
| overflow | 指定如果内容溢出元素框，会发生什么。 |
| overflow-x | 指定如果内容溢出元素的内容区域，如何处理左右边缘。 |
| overflow-y | 指定如果内容溢出元素的内容区域，如何处理上下边缘。 |
