一、浮动布局
1.HTML文档流
<1>. 正常文档流动
- HTML文档流:元素在页面出现的先后顺序。
- 正常文档流：将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右依次排列元素。
<2>.脱离正常文档流
相对正常文档流而言，用CSS样式去控制的HTML文档结构。
例如将在最下面的div放到第一行显示。
在CSS布局中，可以使用浮动或者定位这两种技术来实现”脱离正常文档流”,从而随心所欲地控制页面的布局。
2.浮动float
<1>.设置浮动属性
可以通过不同的浮动属性值灵活地定位div元素，以达到布局网页的目的。
在CSS中任何元素都可以浮动，让盒子及其中的内容浮动到文档的右边或者左边。
浮动元素会生成一个块级框，而不论它本身是何种元素。
语法：
float：取值;常用取值: left、right.
<2>清除浮动属性
语法：
clear:取值;取值为left、right、both.
通常使用both进行清除。还可使用overflow:hidden属性来清除浮动。
二、定位布局
1.简介
- 优点：浮动布局虽然比较灵活但不容易控制，而定位布局可以精准定位页面中的任意元素，更加方便操作页面布局。
- 缺点：定位布局缺乏灵活性，不方便控制空间大小和位置确定的版面布局。
- 定位布局的4种方式：固定、相对、绝对、静态定位
2.固定定位fixed
被固定的元素不会随着滚动条的拖动而改变位置。
语法：
position:fixed;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;说明：
position:fixed;使得元素成为固定定位元素。
然后使用top,bottom,left,right这4个属性来设置元素相对浏览器的位置。
一般只需使用top,left即可确定元素位置。
3.相对定位relative
采用相对定位的元素，其位置是相对于它的原始位置计算而来的。
语法：
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;说明：
通过设定四个属性来设置元素相对原始位置的距离。相对定位的窗口浮上来后，其所占的位置仍然留有穴位，后面的无定位元素仍然不会挤上来。
4.绝对定位
当元素的position属性值为absolute时，这个元素就变成了绝对定位元素，这种方法能够很精确地把元素移动到任意的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。
语法：
position:absoulte;
上下左右。5.CSS静态定位static
如没有指定元素的position属性值，也即是默认情况下元素是静态定位。
static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
三、示例网页链接
