CSS——标准文档流和浮动

web页面和photoshop等设计软件有本质区别，web页面的制作是个“流”，必须从上而下，而设计软件，想往哪里画都可以。

标准流的微观现象：
1）空白折叠现象：
如果想让img标签之间没有空隙，必须紧密连接：

2）高矮不齐，底边对齐
3）自动换行，一行写不满，换行写。

块级元素和行内元素
标准文档流等级森严，分为两种：
1）块级元素
霸占一行，不能与其他任何元素并列
能接受宽、高
如果不设置宽度，那么宽度将默认变为父亲的100%
2）行内元素
与其他行内元素并排
不能设置宽、高。默认的宽度就是文字的宽度。

在html中，我们已经将标签分为文本级和容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

在CSS中，所有的文本级标签都是行内元素，除了p是文本级（但p是个块级元素）。所有的容器级标签都是块级元素。

块级元素和行内元素的相互转换：块级元素可以设置为行内元素，行内元素可以设置为块级元素。

display是用来改变元素的行内、块级性质。inline就是行内。
一旦给一个标签设置display: inline; 那么这个标签将立即变为行内元素，此时它和一个span无异，此时这个div不能设置宽度和高度，这个div可以和别人并排了。

同样，

block就是块的意思。让标签变为块级元素，此时这个标签与一个div无异：这个span能够设置宽度和高度；必须霸占一行，别人无法和它并排；如果不设置宽度，将撑满“父亲”。

标准流里面限制非常多，所以CSS中有三种手段使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位

浮动
CSS里布局用的最多的属性，指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程