CSS中级-5-2 浮动的实例

却尘

浮动实例网格 / 等宽的框

                              

通过使用 float 属性，可以轻松地并排浮动内容框：

实例* {  box-sizing: border-box;} .box {  float: left;  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */  padding: 50px; /* 如果需要在图片间增加间距 */}
什么是 box-sizing？

您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

您可以在我们的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。

图像并排

这种框格（The grid of boxes）也可以用来并排显示图像：

实例.img-container {  float: left;  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */  padding: 5px; /* 如果需要在图片间增加间距 */}
等宽的框

在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：

实例.box {  height: 500px;}

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

实例

使用 Flexbox 创建弹性框：

Flexbox的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 CSS Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。

导航菜单

将 float 与超链接列表一起使用，来创建水平菜单：

实例 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%;}