每日笔记，实例并排浮动框，css并排浮动框，css浮动框框实

本页提供常见的浮动案例。

网格 / 等宽的框

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

实例

* {
  box-sizing: border-box;
}

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

并排浮动的框：

请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性，以确保框不会由于额外的内边距（填充）而损坏。尝试删除此代码以查看效果。