流

什么是流（flow）？

流实际上就是浏览器在页面上拜访HTML元素所用到的方法。浏览器从HTML文件的最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。
每个块元素之间有一个换行；
每个内联元素在水平方向上互相挨着。
即：

块元素从上到向下流

内联元素从左上方向右下方流

当浏览器并排放置两个内联元素时

浏览器会使用他们的外边距之和来计算它们之间的空间

当浏览器上下放置两个块元素时

浏览器会把它们共同的外边距折叠在一起。即它们之间的距离为最大的外边距高度


通常我们并不会设置内联元素的外边距，但是有一个例外——图像。对于图像，我们不仅会设置外边距，还会设置内边距和边框。


当一个元素嵌套在另一个元素中时，若它们都有外边距，外边距也会发生折叠。我们可以这样判断元素的外边距是否会折叠：只要两个垂直外边距碰到一起，它们就会发生折叠。即使是一个元素嵌套在另一个元素中也不会例外。
但注意：如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，这样也不会发生折叠。

如何浮动元素？

1. 指定一个标识（即id）
2. 指定一个宽度
   对于所有的浮动元素都有一个要求：它必须有一个宽度。
3. 让它浮动
   增加float属性，float属性可以设置为left或right。

浏览器怎样处理浮动元素和其他元素？

1. 浏览器先正常地将元素流入页面，从文件最上端开始，主动移向末尾的元素。
2. 浏览器遇到浮动元素时，会将它尽可能地放在float属性指定的方向（左边或右边），并且从流（flow）中删除这个段落，就好像它浮在页面上一样。
3. 其他的块元素会按顺序向下流入，仿佛根本没有浮动的段落一样。浮动元素不再是正常流的一部分。
4. 但是，对内联元素定位时，它们会考虑到浮动元素的边界，因此会围绕着浮动元素摆放。
   即，我们可以这样理解：

浮动元素是被块元素忽略的元素，但是内联元素清楚地知道它们在哪里。

• CSS只允许将一个元素向左或向右浮动。我们可以想象：如果将一个元素浮动到中间，那么这个浮动元素下面的内联内容就必须围绕这个元素的两边流动，这在浏览器中很难做到。
• 浮动元素的外边距不会折叠。浮动元素只是浮在页面上，换句话说，浮动元素的外边距并不会碰到正常流中元素的外边距，所以它们不会折叠。
• 内联元素也可以浮动。最常见的例子就是浮动图像。将图像在段落中向左或向右浮动，我们就会看到文本围绕在图像的周围。

clear属性

我们可能会遇到这样的情况：边栏将页脚挡住一部分

为什么会这样？原来，边栏不在流中，所以页脚会将边栏忽略。当主内容去太短时，页脚就会上移。这时我们就需要用到clear属性。

#footer
{
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           10px;
  font-size:        90%;
  clear:            right;
}

clear属性即可以请求当元素流入页面时，在这个元素左边、右边或两边不允许有浮动内容。

修改之后，页面可以正常的显示啦！