HTML 标准文档流

HTML 标准文档流

本文的重点是讲float布局，以及清除浮动的方法。

在讲float之前，首先要说一下什么是标准文档流。

*、标准文档流：指的是元素排版布局过程中，元素会默认从左往右、从上往下的流式排列方式。前面的内容发生变化后，后面的内容位置也会随着发生变化。

HTML 就是一种标准文档流文件。
HTML 文档的特点：三个微观现象、三个元素等级
三个微观现象

1、空白折叠现象：无论写多少个空格（或者换行），最终显示的都只有一个空格！
2、底边对齐现象：当排列在同一行的元素高度不一致的时候，会出现底边对齐的现象！

同一行内放了四个元素（span、a、img、input），四个元素的 height 不一致，最终以底边对齐的形式展示！

3、自动换行：当一行展示不下的时候，会自动排列到下一行进行展示！

*、三个元素等级：在标准流中，大部分元素都是区分等级的，习惯将元素划分为以下几种加载级别：1、块级元素。2、行内元素。3、行内块元素。
1、块级元素
特点：

• a、可以设置宽高。如果不设置宽高，会被内容自动撑开高度！

• b、必须独占一行，不能与其他元素并排显示。

大部分容器级标签都是块级元素，如：div、h1~h6、p 标签等。
2、行内元素
特点：

• a、不能正常加载 height、width 属性。

• b、无论是否设置 height、width 属性， 高度和宽度都只能被内容自动撑开。

• c、可以与其他行内、行内块元素并排显示！

大部分文本标签都是行内元素，比如 span、a、b标签等。
3、行内块元素
特点：

• a、行内块元素可以设置宽高。

• b、行内块元素可以并排一行显示。

• c、如果没有设置宽高，则会被内容自动撑开。

• d、行内元素可以同时设置宽高，和并排显示，但是还是存在标准文档流的微观性质：如 空白折叠现象（元素之间存在空隙）比如 img、input标签等。
  可以通过 display：block / inline / inline-block 更改元素显示模式。
  

*、以上是标准文档流的特点，尽管 display 可以更改元素的显示模式，但不能改变标准文档流的性质，页面还是只能从上往下加载，且存在空白折叠现象等微观性质。想要实现更多的界面布局效果，需要脱离标准文档流的限制！
*、脱离标准文档流的方法
1、给元素添加浮动： float
2、绝对定位： position：absolute
3、固定定位： position：fixed
由于内容过长，关于脱离标准文档流的具体内容，放在下一篇讲。