CSS 布局 - Float 示例
本页包含常见的 float 示例。
网格盒/等宽盒
盒 1
盒 2
盒 1
盒 2
盒 3
使用 float 属性，可以轻松地将内容盒并排放置。
示例
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 三个盒（四个盒用 25%，两个盒用 50% 等）*/
padding: 50px; /* 如果要在图片之间留白 */
}
自己动手试一试 »
什么是 box-sizing？
您可以轻松地并排放置三个浮动盒。但是，当您添加会增大每个盒宽度（例如 padding 或 border）的元素时，该盒就会损坏。 box-sizing 属性允许我们将 padding 和 border 包含在盒的总宽度（和高度）内，从而确保 padding 保持在盒内且不会导致损坏。
您可以在我们的 CSS Box Sizing 章中了解更多关于 box-sizing 属性的信息。
图片并排
盒网格也可用于并排显示图片。
示例
.img-container {
float: left;
width: 33.33%; /* 三个容器（四个容器用 25%，两个容器用 50% 等）*/
padding: 5px; /* 如果要在图片之间留白 */
}
自己动手试一试 »
等高盒
在上一个示例中，您学习了如何使盒并排放置并具有相等的宽度。但是，创建等高的浮动盒并不容易。一个快速修复方法是设置一个固定高度，如下例所示：
盒 1
一些内容，一些内容，一些内容
盒 2
一些内容，一些内容，一些内容
一些内容，一些内容，一些内容
一些内容，一些内容，一些内容
但是，这不够灵活。如果您能确保盒的内容始终相同，那就可以了。但很多时候，内容并不相同。如果您在手机上尝试上面的示例，您会看到第二个盒子的内容会显示在盒子外面。这时 CSS3 Flexbox 就派上用场了——它可以自动拉伸盒子，使其长度与最长的盒子一样长。
示例
使用 Flexbox 创建弹性盒
提示： 您可以在我们的 CSS Flexbox 章中了解更多关于 Flexbox 布局模块的信息。
导航菜单
您还可以使用 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%;
}
自己动手试一试 »
更多示例
带边框和边距，并向右浮动在段落中的图片
让图片在段落中向右浮动。为图片添加边框和边距。
带说明的图片向右浮动
让带说明的图片向右浮动。
让段落的首字母向左浮动
让段落的首字母向左浮动并设置字母样式。
创建带有 float 的网站
使用 float 创建一个包含导航栏、页眉、页脚、左侧内容和主内容的首页。
所有 CSS Float 属性
| 属性 | 描述 |
|---|---|
| box-sizing | 定义元素的宽度和高度如何计算：是否包含内边距和边框 |
| 清除 | 指定与浮动元素相邻的元素应该发生什么 |
| float | 指定元素应该向左、向右浮动，还是不浮动 |
| overflow | 指定内容溢出元素框时会发生什么 |
| overflow-x | 指定内容在溢出元素内容区域时，其左/右边缘应如何处理 |
| overflow-y | 指定内容在溢出元素内容区域时，其上/下边缘应如何处理 |
