CSS 浮动布局和网格系统

Cellinlab

发布于 2023-05-17 11:23:01

94600

代码可运行

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

运行总次数：0

代码可运行

# 浮动布局的设计初衷

浮动能将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流就能够包围它。这种布局在报纸和杂志中很常见，因此 CSS 增加了浮动来实现这种效果。（CSS 是一种排版约定）

浮动元素会被移出正常文档流，并被拉到容器边缘。文档流会重新排列，但是它会包围浮动元素此刻所占据的空间。如果让多个元素向同侧浮动，它们就会挨着排列。

之所以这样做是因为它是那个年代唯一的选择。后来，display: inline-block 和 display: table 的问世才让我们有了别的方案，尽管二者可替代的场景有限。Flexbox 和网格布局最近几年才出现，在它们出现之前，浮动一直承担着页面布局的重任。

通常，最简单的方式是先将网页的大块区域布局好，再逐级布局内部的小元素。

  <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main class="main clearfix">
      <h2>Running Tips</h2>
      <div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Strength</h4>
            <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Cadence</h4>
            <p>Check your stride turnover. The most efficient runners take about 180 steps per minute.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Change it up</h4>
            <p>Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
<style>
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
body * + * {
  margin-top: 1.5em;
}
header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}
.main {
  padding: 0 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
</style>
</html>

https://codepen.io/cellinlab/pen/zYpPNOq

Flexbox 正在迅速取代浮动在页面布局中的地位。对新手开发人员而言，Flexbox的行为很直观，可预测性更好。在现代浏览器中，不用浮动也能比过去更好地实现布局，甚至可以完全弃用浮动。但是如果要支持IE浏览器，现在放弃浮动还为时过早。

此外，要实现将图片移动到网页一侧，并且让文字围绕图片的效果，浮动仍然是唯一的方法。

# 容器折叠和清除浮动

# 理解容器折叠

浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main class="main clearfix">
      <h2>Running Tips</h2>
      <div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Strength</h4>
            <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Cadence</h4>
            <p>Check your stride turnover. The most efficient runners take about 180 steps per minute.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Change it up</h4>
            <p>Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
<style>
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
body * + * {
  margin-top: 1.5em;
}
header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}
.main {
  padding: 0 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
.media {
  float: left;
  width: 50%;
  padding: 1.5em;
  background-color: #eee;
  border-radius: .5em;
}
</style>
</html>

https://codepen.io/cellinlab/pen/dyJZNNJ

使用跟浮动配套的 clear 属性。将一个元素放在主容器的末尾，并对它使用clear，这会让容器扩展到浮动元素下面。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main class="main clearfix">
      <h2>Running Tips</h2>
      <div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Strength</h4>
            <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Cadence</h4>
            <p>Check your stride turnover. The most efficient runners take about 180 steps per minute.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Change it up</h4>
            <p>Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.</p>
          </div>
        </div>
      </div>
      <div style="clear: both"></div>
    </main>
  </div>
</body>
<style>
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
body * + * {
  margin-top: 1.5em;
}
header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}
.main {
  padding: 0 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
.media {
  float: left;
  width: 50%;
  padding: 1.5em;
  background-color: #eee;
  border-radius: .5em;
}
</style>
</html>

https://codepen.io/cellinlab/pen/ExobZwm

clear: both 声明让该元素移动到浮动元素的下面，而不是侧面。clear 的值还可以设置为left或者right，这样只会相应地清除向左或者向右浮动的元素。因为空div本身没有浮动，所以容器就会扩展，直到包含它，因此也会包含该div上面的浮动元素。

这种方法的确能实现预期的行为，但是不雅。要在 HTML 里添加不必要的标记，才能实现本应该由 CSS 实现的效果。

# 理解清除浮动

不用额外的 div 标签，还可以用伪元素（pseudo-element）来实现。使用::after伪元素选择器，就可以快速地在 DOM 中在容器末尾添加一个元素，而不用在 HTML 里添加标记。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main class="main clearfix">
      <h2>Running Tips</h2>
      <div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Strength</h4>
            <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Cadence</h4>
            <p>Check your stride turnover. The most efficient runners take about 180 steps per minute.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Change it up</h4>
            <p>Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
<style>
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
body * + * {
  margin-top: 1.5em;
}
header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}
.main {
  padding: 0 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
.media {
  float: left;
  width: 50%;
  padding: 1.5em;
  background-color: #eee;
  border-radius: .5em;
}
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}
</style>
</html>

https://codepen.io/cellinlab/pen/yLpPgWg

请注意，要给包含浮动的元素清除浮动，而不是给别的元素，比如浮动元素本身，或包含浮动的元素后面的兄弟元素。

这个清除浮动还有个一致性问题没有解决：浮动元素的外边距不会折叠到清除浮动容器的外部，非浮动元素的外边距则会正常折叠。

使用清除浮动的一个修改版，它能包含所有的外边距，这样更符合预期。使用这个修改版，能防止标题顶部的外边距在 main 元素的外部折叠。

 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main class="main clearfix">
      <h2>Running Tips</h2>
      <div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Strength</h4>
            <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Cadence</h4>
            <p>Check your stride turnover. The most efficient runners take about 180 steps per minute.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Change it up</h4>
            <p>Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
<style>
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
body * + * {
  margin-top: 1.5em;
}
header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}
.main {
  padding: 0 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
.media {
  float: left;
  width: 50%;
  padding: 1.5em;
  background-color: #eee;
  border-radius: .5em;
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}
</style>
</html>

https://codepen.io/cellinlab/pen/PoEOpYY

当我们不想要外边距折叠时，这个版本的清除浮动非常有用。

在清除浮动时使用 display: table 能够包含外边距，是因为利用了 CSS 的一些特性。创建一个 display:table 元素（或伪元素），也就在元素内隐式创建了一个表格行和一个单元格。因为外边距无法通过单元格元素折叠，所以也无法通过设置了 display: table 的伪元素折叠。

# 浮动陷阱

现在页面里的白色容器已经能够包含浮动的媒体元素了，但是出现了另一个问题：四个媒体盒子没有如预期那样均匀地占据两行。虽然前两个盒子（“Strength”和“Cadence”）符合预期，但是第三个盒子（“Change it up”）出现在了右边，也就是第二个盒子的下方，导致第一个盒子下面出现了一片非常大的空白。这是因为浏览器会将浮动元素尽可能地放在靠上的地方。

这种行为本质上取决于每个浮动块的高度。即使高度相差 1px，也会导致这个问题。相反，如果盒子 1 比盒子 2 矮，盒子 3 就没法抓住盒子 1 的边缘。除非以后内容改变导致元素高度发生变化，否则就不会看到这种现象。

要想修复这个问题很简单：清除第三个浮动元素上面的浮动。更通用的做法是，清除每行的第一个元素上面的浮动。由于已知每行有两个盒子，因此只需要清除每行的第奇数个元素上面那行的浮动即可。

 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main class="main clearfix">
      <h2>Running Tips</h2>
      <div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Strength</h4>
            <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Cadence</h4>
            <p>Check your stride turnover. The most efficient runners take about 180 steps per minute.</p>
          </div>
        </div>
        <div class="media">
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Change it up</h4>
            <p>Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
          </div>
        </div>
        <div class="media">
          
          <img src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
<style>
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
body * + * {
  margin-top: 1.5em;
}
header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}
.main {
  padding: 0 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
.media {
  float: left;
  margin: 0 1.5em 1.5em 0;
  width: calc(50% - 1.5em);
  padding: 1.5em;
  background-color: #eee;
  border-radius: .5em;
}
.media:nth-child(odd) {
  clear: left;
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}
</style>
</html>

https://codepen.io/cellinlab/pen/JjMOWGa

# 媒体对象和 BFC

让图片在一侧，一段文字出现在图片的旁边。是一种很典型的网页布局，Web 开发人员 Nicole Sullivan 把这种布局称作“媒体对象”。

# BFC

BFC 是网页的一块区域，元素基于这块区域布局。虽然 BFC 本身是环绕文档流的一部分，但它将内部的内容与外部的上下文隔离开。这种隔离为创建 BFC 的元素做出了以下 3 件事情:

包含了内部所有元素的上下外边距。它们不会跟 BFC 外面的元素产生外边距折叠。
包含了内部所有的浮动元素
不会跟 BFC 外面的浮动元素重叠

简而言之，BFC 里的内容不会跟外部的元素重叠或者相互影响。如果给元素增加 clear 属性，它只会清除自身所在 BFC 内的浮动。如果强制给一个元素生成一个新的 BFC，它不会跟其他 BFC 重叠。

给元素添加以下的任意属性值都会创建 BFC:

float：left 或 right，不为 none 即可
overflow：hidden、auto 或 scroll，不为 visible 即可
display：inline-block、table-cell、table-caption、flex、inline-flex、grid 或inline-grid。拥有这些属性的元素称为块级容器
网页的根元素也创建了一个顶级的 BFC

# 使用 BFC 实现媒体对象布局

使用overflow: auto通常是创建 BFC 最简单的一种方式。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main class="main clearfix">
      <h2>Running Tips</h2>
      <div>
        <div class="media">
          <img class="media-img" src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Strength</h4>
            <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes.</p>
          </div>
        </div>
        <div class="media">
          <img class="media-img" src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Cadence</h4>
            <p>Check your stride turnover. The most efficient runners take about 180 steps per minute.</p>
          </div>
        </div>
        <div class="media">
          <img class="media-img" src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
          <div class="media-body">
            <h4>Change it up</h4>
            <p>Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
          </div>
        </div>
        <div class="media">
          <img class="media-img" src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
<style>
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
body * + * {
  margin-top: 1.5em;
}
header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}
.main {
  padding: 0 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
.media {
  float: left;
  margin: 0 1.5em 1.5em 0;
  width: calc(50% - 1.5em);
  padding: 1.5em;
  background-color: #eee;
  border-radius: .5em;
}
.media:nth-child(odd) {
  clear: left;
}
.media-img {
  float: left;
  margin-right: 1.5em;
}
.media-body {
  overflow: auto;
  margin-top: 0;
}
.media-body h4 {
  margin-top: 0;
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}
</style>
</html>

https://codepen.io/cellinlab/pen/bGaYqMg

# 网格系统

现在媒体对象的宽度是 50%，因此一行有两个元素。如果想要复用前面的设计，但需要一行放三个元素，那又该怎么办呢？

一种比较普遍的做法是借助网格系统提高代码的可复用性。网格系统提供了一系列的类名，可添加到标记中，将网页的一部分构造成行和列。它应该只给容器设置宽度和定位，不给网页提供视觉样式，比如颜色和边框。需要在每个容器内部添加新的元素来实现想要的视觉样式。

大部分流行的 CSS 框架包含了自己的网格系统。它们的实现细节各不相同，但是设计思想相同：在一个行容器里放置一个或多个列容器。列容器的类决定每列的宽度。

# 理解网格系统

通常网格系统的每行被划分为特定数量的列，一般是 12 个，但也可以是其他数。每行子元素的宽度可能等于1~12 个列的宽度。

选取 12 作为列数是因为它能够被 2、3、4、6 整除，组合起来足够灵活。比如可以很容易地实现一个 3 列布局（3 个 4 列宽的元素）或者一个 4 列布局（4 个 3 列宽的元素）。还可以实现非对称的布局，比如一个 9 列宽的主元素和一个 3 列宽的侧边栏。在每个子元素里可以放置任意标记。

# 构建网格系统

给每个网格列添加左右内边距，创造间隔。把间隔交给网格系统实现，而不是让内部的组件（比如媒体对象）自己实现，这样就能够在其他页面复用这套网格系统，不用再费心去实现间隔。

 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>
    <main class="main clearfix">
      <h2>Running Tips</h2>
      <div class="row">
        <div class="column-6">
          <div class="media">
            <img class="media-img" src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
            <div class="media-body">
              <h4>Strength</h4>
              <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes.</p>
            </div>
          </div>
        </div>
        <div class="column-6">
          <div class="media">
            <img class="media-img" src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
            <div class="media-body">
              <h4>Cadence</h4>
              <p>Check your stride turnover. The most efficient runners take about 180 steps per minute.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="column-6">
          <div class="media">
            <img class="media-img" src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_shoes.png" class="media-image">
            <div class="media-body">
              <h4>Change it up</h4>
              <p>Don't run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
            </div>
          </div>
        </div>
        <div class="column-6">
          <div class="media">
            <img class="media-img" src="https://web-cellinlab-blog-1252726876.cos.ap-beijing.myqcloud.com/float_demo_runner.png" class="media-image">
            <div class="media-body">
              <h4>Focus on form</h4>
              <p>Run tall but relaxed. Your feet should hit the ground beneath your hips, not out in front of you.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
<style>
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
body * + * {
  margin-top: 1.5em;
}

.row {
  margin-left: -0.75em;
  margin-right: -0.75em;
}
.row::after {
  content: " ";
  display: block;
  clear: both;
}
/* 匹配所有类包含 column- */
[class*="column-"] {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
}
.column-1 {
  width: 8.3333%;
}
.column-2 {
  width: 16.6667%;
}
.column-3 {
  width: 25%;
}
.column-4 {
  width: 33.3333%;
}
.column-5 {
  width: 41.6667%;
}
.column-6 {
  width: 50%;
}
.column-7 {
  width: 58.3333%;
}
.column-8 {
  width: 66.6667%;
}
.column-9 {
  width: 75%;
}
.column-10 {
  width: 83.3333%;
}
.column-11 {
  width: 91.6667%;
}
.column-12 {
  width: 100%;
}

header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}

.main {
  padding: 0 1.5em 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
.media {
  padding: 1.5em;
  background-color: #eee;
  border-radius: .5em;
}
.media-img {
  float: left;
  margin-right: 1.5em;
}
.media-body {
  overflow: auto;
  margin-top: 0;
}
.media-body h4 {
  margin-top: 0;
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}
</style>
</html>