目录
浮动原理
在学这部分之前，已经用过很多次float，但都出现了大大小小的问题。一定要掌握细节。
浮动这两个字怎么理解。
浮：元素可以脱离文档流漂浮到网页上面。
动：元素可以偏移位置，挪动到指定位置。
脱离文档流
文档流是元素在页面中出现的先后顺序。
元素在没有任何CSS样式修饰的时候，元素的排列方式就属于正常文档流。即窗体自上而下分成一行一行的，并在每行中按照从左到右的顺序排放元素。
相对于正常文档流，脱离文档流就是打乱了顺序。
float属性
用float来设置浮动，当被设置浮动后，会按照一个指定的方向移动，直至到达父容器的边界，或者另外一个浮动元素时停止。
不同的取值：
| none | 默认值，不浮动 |
| left | 左浮动，沿着父容器靠左排列 |
| right | 右浮动，沿着父容器靠右排列 |
当父容器中的两个元素都添加上浮动的时候，可以实现左右排列的布局。
float的注意点
1、float属性不会影响到前面元素。
2、当有内容的时候，内容默认提升半层，实现图文混排的效果。
3、浮动元素默认宽与内容相同。
clear属性
不希望浮动元素影响后面元素的布局的话，加clear
left 清除左浮动 right 清除右浮动 both 都清除
清除嵌套中的浮动
如果父元素没有设置宽高，那么子元素浮动以后，父元素就不能被撑开，由此要避免这种情况。
几种不建议使用的方式不再列举。
主要的是after伪类：
：after{content：“内容”}
默认内联。
因此加上display：block转化为块，可以撑开父元素。
after伪类还有before属性，把内容添加到前面。
总的来说就是：：after{content：“内容” ；display：block； clear：both；}
CSS定位
定位属性
定位属性可以把一个元素精确地放在页面上。它包括定位模式和位置属性。
定位模式：
使用position
static 默认静态定位，就是html默认位置 relative 相对定位，相对于原文档流的位置进行定位 absolate 绝对定位，相对于上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位
位置属性：
确定元素的具体位置。
top，bottom，left，right
相对定位
relative
相对于原文档流。
相对于元素本身左上角进行偏移。
position,left,top比如这些都要设置才起作用。
绝对定位
absolate
相对于已经定位的父元素。
会脱离文档流。
若所有父元素都没有定位，则依据浏览器窗口左上角。
固定定位
fixed
脱离文档流
不会随着滚动条改变位置。
永远相对浏览器左上角进行偏移。
定位的层级
叠加的时候，z-index：数值
数字越大，层级越高。
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
