欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1 问题引入

在网页设计布局中，除了普通流以外，还有重要的标准流与浮动流。在这篇文章中我将谈谈我所理解的标准流与浮动流，希望能给大家的CSS带来些许帮助。

2 浅显理解

在CSS中单单的使用普通流是肯定不够的。那么这个时候就需要用到标准流，但是在标准流中，有些元素是不能设置一些属性的。像行内元素就不能设置它的宽高，但是再结合浮动流后，它又可以进行设置了。接下里，我们就谈谈什么是标准流，什么是浮动流。

首先，介绍关于标准流的知识。标准流是浏览器默认的排版方式，也被为称文档流。它是不借助任何特殊的CSS排列元素的排列规则。也就是说，标准流是一种排列规则。它的元素主要分为块级元素和行内元素。

• 块级元素（block）：

它是独占一行的，主要在排版中做垂直分布的作用。它不同于接下来的一种元素，它是可以设置宽高的。如果不去对它设置宽和高，那么它将会默认宽高为百分之百。

• 行内元素（inline）:

它可以多种元素存在一行里，它主要是对排版中的水平分布起作用。它（input,img除外）是不能直接设置宽高的，但是可以使用浮动来设置它的宽高。

说完标准流的主要元素，接下来说说嵌套规则。嵌套规则往往与框架同时出现。通俗的讲，框架等于外壳一样，只是一个框。嵌套就是框架里面的东西，一层一层的按一定的逻辑顺序进行嵌套，里面的一层就是外面一层的嵌套。开始说嵌套规则，其实就是一些注意事项：

1)  块级元素能嵌入行内元素；

2)  ul、ol只能嵌套li，而li可以嵌套任何元素；

3)  dl只能嵌套dt、dd元素；

4)  textarea只能嵌套文本；

5)  p、h只能嵌套文本和行内元素；

6)  select只能嵌套option；

7)  a可以不嵌套交互性标签。

另外，标准流中上下相邻的两个元素的margin-bottom与margin-top会发生重叠的情况。

现在，开始讲讲浮动流。浮动流的作用是实现文字的环绕效果，它只能用于水平排版，设置某个元素的左对齐或者右对齐。在浮动流中的元素，是都可以设置宽高的，与标准流中的行内块级元素很相识，但是浮动流没有居中对齐（不能使用margin:0 auto）。浮动流的脱标是指，在前一个元素浮动，后一个没有的情况下，前面的元素会覆盖后面的元素。在排序方面，同向时，按照浮动的先后顺序进行排序；在不同向时，左浮动的会找左浮动，右浮动的会找右浮动的。浮动元素浮动后的位置是由元素浮动前标准流中的位置决定的。在浮动元素中会出现元素贴靠的现象，这是由于父元素位置决定的，位置足够时，就依次向左贴，直到贴到父元素的最左端为止；位置不够时，就会并列显示。

3 总结

在实际学习中和动手实践中，要善于留心标准流、浮动流的书写方式。感受不同排版方式的特色。

更多精彩文章：

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发