手册
目录
收藏672
分享
阅读1042
更新时间2025-07-16
通过使用 float 属性，可以轻松地并排浮动内容框：
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
padding: 50px; /* 如果需要在图片间增加间距 */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。
您可以在我们的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。
这种框格（The grid of boxes）也可以用来并排显示图像：
.img-container {
float: left;
width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
padding: 5px; /* 如果需要在图片间增加间距 */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
.box {
height: 500px;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：
使用 Flexbox 创建弹性框：
Box 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。 Box 2 - 我的高度将跟随框 1。 运行实例 »点击 "运行实例" 按钮查看在线实例
Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 CSS Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。
将 float 与超链接列表一起使用，来创建水平菜单：
点击 "运行实例" 按钮查看在线实例
使用 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%;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
| 属性 | 描述 |
|---|---|
| box-sizing | 定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。 |
| clear | 指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。 |
| float | 指定元素应如何浮动。 |
| overflow | 指定如果内容溢出元素框会发生什么情况。 |
| overflow-x | 指定当溢出元素的内容区域时，如何处理内容的左/右边缘。 |
| overflow-y | 指定当溢出元素的内容区域时，如何处理内容的上/下边缘。 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
