css今日笔记

4 布局
4.1 文档流
所谓文档流就是按照元素的顺序从左到右、由上而下的方式排列。

显示效果为

如果有块级元素，块级元素会占据整行。
在上例的基础上增加一个块级元素div

显示效果如下：

4.2 定位
默认的文档流很多时候不能满足我们的布局要求，需要更丰富的布局手段，这就需要用到定位了。定位方式有：static、fixed、relative、absolute。
static 静态定位（默认）
无定位，元素正常出现了流中，不受left、right、top、bottom属性的影响。

显示效果 显示效果如下

和原来一样，并没有受left属性的影响

relative 相对定位
先看使用静态（默认）定位的3个div的显示效果

显示结果为

然后将div2的样式增加如下属性，即使用相对定位
position: relative;
top:20px;
left:30px;

对比结果可以看出，div2使用相对定位是从原有位置根据left、top进行位移，而且不影响后续元素（div3）的位置。

absolute 绝对定位
将上例中的相对定位（relative）改成绝对定位（absolute）
结果为

从结果可以看出：绝对定位的元素将从流中被“摘”出来，依靠left和top属性进行定位。
在上例的基础上，增加div的嵌套，代码如下：

显示效果为

从结果中可以看出div22从流中脱离出来了，并相对于其父元素（div2）进行偏移
fixed固定定位

将上例中div22的绝对定位（absolute）改成固定定位（fixed），显示效果如下：

从结果可以看出，fix定位会将元素从流中脱离出来，并相对于窗口进行偏移。
z-index
重新定位之后可能会出现重叠，通过z-index可以调整其顺序。z-index默认值为auto，即与父元素相同，可以设置为数值，数值大的层位于相对小的上方。
上例中div1被div22覆盖了，如果将div1的z-index设置为1（大于div22，其默认为auto）
#div1{
background-color: orange
z-index: 1;
}
显示效果如下

从结果可以看出，div1已经位于div22上方。
定位总结
（1）标准文档流按照从左到右、自上而下的方式依次排列元素。若要改变默认布局方式则需使用relative、absolute、fixed等定位方式；
（2）relative是相对于其原有位置进行偏移；
（3）absolute是相对于其父容器进行偏移，注意其父容器必须是有定位的，即非默认（static）定位方式，否则会一直往上追溯，直到页面；
（4）fixed是相对于整个页面进行偏移。
（5）relative不会从标准流脱离，而absolute和fixed都从标准流中脱离出来

4.3 浮动
通过设定浮动（float），可以使得元素从原本的文档流中脱离出来，感觉像浮在原本的文档流上面。
先看看正常的块级元素的显示效果

显示效果如下图

给div1和div2设置浮动
float:left;
显示效果如下

从结果中可以看出div1和div2从文档流中脱离出来了，并从左到右依次排列
改为向右浮动试试，效果如下

如果一左一右呢

怎么实现如下效果呢

代码如下

显示效果

从结果中可以看出，div5不见了，实际上div是被浮动的div2、div3、div4给覆盖了，可以通过调试工具查看到。
如何让div5能够正常显示呢？
需要清除浮动，在div4后增加一个div，并设置其样式为清除浮动
#clear{
clear: left;
}