CSS 布局 - 浮动示例
本页包含常见的浮动示例。
盒子网格/等宽盒子
框 1
框 2
框 1
框 2
框 3
随着 float 属性，很容易使内容框并排浮动：
例子
* {
盒子尺寸：边框；
}
。盒子 {
向左飘浮;
宽度：33.33%；/* 三个盒子（四个使用 25%，两个使用 50%，等等）*/
padding: 50px; /* 如果你想在图像之间留出空间 */
}
亲自尝试 »
什么是 box-sizing？
您可以轻松地并排创建三个浮动框。但是，当您添加一些可以扩大每个框宽度的内容（例如填充或边框）时，框将会断开。 box-sizing 属性允许我们将填充和边框包含在框的总宽度（和高度）中，确保填充保持在框内并且不会中断。
您可以在我们的 CSS 盒子尺寸章节.
并排图像
网格还可用于并排显示图像：
等高盒子
在上一个示例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相等高度的浮动框并不容易。不过，一个快速解决方法是设置固定高度，如下例所示：
框 1
一些内容，一些内容，一些内容
框 2
一些内容，一些内容，一些内容
一些内容，一些内容，一些内容
一些内容，一些内容，一些内容
然而，这种布局不太灵活。如果你能保证盒子里的内容量始终相同，那就没问题了。但很多时候，内容并不相同。如果你在手机上尝试上述示例，你会看到第二个盒子的内容将显示在盒子外面。这就是 CSS3 Flexbox 派上用场的地方——因为它可以自动将盒子拉伸到与最长的盒子一样长：
例子
使用 弹性盒子 创建弹性盒子：
框 1 - 这是一些文本，以确保内容变得非常高。这是一些文本，以确保内容变得非常高。这是一些文本，以确保内容变得非常高。
框 2 - 我的身高将遵循框 1。
提示： 您可以在我们的CSS Flexbox 章节.
导航菜单
您还可以使用 float 使用超链接列表创建水平菜单：
网页布局示例
使用 float 财产：
例子
。页眉页脚 {
背景颜色：灰色；
白颜色;
填充：15px；
}
。柱子 {
向左飘浮;
填充：15px；
}
.clearfix::之后 {
内容： ””;
清楚：两者皆可；
显示：表格；
}
。菜单 {
宽度：25%；
}
。内容 {
宽度：75%；
}
亲自尝试 »
更多示例
带有边框和边距的图像在段落中浮动到右侧
让图像在段落的右侧浮动。为图像添加边框和边距。
带有标题的图像浮动到右侧
让带有标题的图像浮动到右侧。
让段落首字母浮动到左侧
让段落的首字母浮动到左侧，并设置字母样式。
创建带有浮动的网站
使用浮动创建带有导航栏、页眉、页脚、左侧内容和主要内容的主页。
所有 CSS 浮动属性
| 财产 | 描述 |
|---|---|
| 盒子大小 | 定义元素的宽度和高度如何计算：是否应包括填充和边框 |
| 清除 | 规定浮动元素旁边的元素应发生什么 |
| 漂浮 | 规定元素是否应该向左浮动、向右浮动，或者不浮动 |
| 溢出 | 规定当内容溢出元素框时会发生什么 |
| 溢出-x | 指定当内容溢出元素的内容区域时如何处理内容的左/右边缘 |
| 溢出 | 指定当内容溢出元素的内容区域时如何处理内容的顶部/底部边缘 |
