CSS 布局 - 浮动实例
本页提供常见的浮动案例。
网格 / 等宽的框
通过使用 float 属性,可以轻松地并排浮动内容框:
实例
* { box-sizing: border-box; } .box { float: left; width: 33.33%; /* 三个框(四框使用 25%,两框使用 50%,以此类推) */ padding: 50px; /* 如果需要在图片间增加间距 */ }
什么是 box-sizing?
您可以轻松地并排创建三个浮动框。但是,当您添加一些内容来扩大每个框的宽度(例如,内边距或边框)时,这个框会损坏。 box-sizing 属性允许我们在框的总宽度(和高度)中包括内边距和边框,确保内边距留在框内而不会破裂。
您可以在我们的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。
图像并排
![](/i/photo/tulip.jpg)
![](/i/photo/tulip-2.jpg)
![](/i/photo/flower-4.jpg)
这种框格(The grid of boxes)也可以用来并排显示图像:
实例
.img-container { float: left; width: 33.33%; /* 三个框(四框使用 25%,两框使用 50%,以此类推) */ padding: 5px; /* 如果需要在图片间增加间距 */ }
等宽的框
在上例中,您学习了如何以相等的宽度并排浮动框。但是,创建具有相同高度的浮动框并不容易。不过,快速解决方案是设置一个固定的高度,如下例所示:
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; }
但是,这么做就失去了弹性。如果可以保证框中始终有相同数量的内容,那是可以的。但是很多时候,内容是不一样的。如果您在手机上尝试上例,则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长:
实例
使用 Flexbox 创建弹性框:
Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 CSS Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。
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%; }
更多实例
- 带有边框和外边距的图像浮动到段落的右侧
- 让图像浮动到段落的右侧。在图像上添加边框和外边距。
- 带标题的图像浮动到右侧
- 让带有标题的图像向右浮动。
- 让段落的第一个字母向左浮动
- 让段落的第一个字母向左浮动并设置该字母的样式。
- 用浮动创建一个网站
- 使用浮动创建带有水平导航栏、页眉、页脚、左侧导航栏和主要内容的首页。
所有 CSS 浮动属性
属性 | 描述 |
---|---|
box-sizing | 定义元素的宽度和高度的计算方式:它们是否应包含内边距和边框。 |
clear | 指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。 |
float | 指定元素应如何浮动。 |
overflow | 指定如果内容溢出元素框会发生什么情况。 |
overflow-x | 指定当溢出元素的内容区域时,如何处理内容的左/右边缘。 |
overflow-y | 指定当溢出元素的内容区域时,如何处理内容的上/下边缘。 |