浮动 定位 高度塌陷

div标签没有默认样式
显示框样式：border-style
font-family：字体类型属性 多组值用逗号隔开
class多组值用空格隔开
text-indent：文本缩进（em）
clear属性：left，right，both
z-index定义定位元素层级值越大，层级越高
定位（position）
相对定位（relative）：相对于元素定位 不会脱离文档流
绝对定位（absolute）：当元素开启了绝对定位，会相对于离他最近的开启了定位的祖先元素进行定位；若没有祖先元素开启定位，就会相对于浏览器窗口进行定位 会脱离文档流
固定定位（fixed）：固定于页面（浏览器），永远相对于浏览器进行定位 特殊的绝对定位

层级问题：

对于兄弟元素：设置了定位后（不管是绝对定位还是相对定位），下面的兄弟元素会盖住上面的元素；使用z-index规定层级，值越大层级越高。
对于父子元素：设置了定位过后，不管z-index的值有多大，父元素都不会超过子元素。
浮动（float）
特点：

• 若浮动元素上面有一个没有设置浮动元素的块元素，那么下面的浮动元素永远不会超过上面的块元素（块元素会独占一行）
• 浮动元素不会超过兄弟元素，最多和他一样齐
• 文字会环绕在浮动元素周围
• 对于块元素：浮动后，宽度会变成自身宽度
• 对于内联元素：浮动后可设置宽高属性

高度塌陷
什么是高度塌陷？
高度塌陷是父元素的高度自适应，设置浮动后，高度变为0。
如何解决高度塌陷？

• 给父元素设置overflow：hidden缺点：子元素有定位属性，使用此方法后，容器以外的部分将会被裁掉
• 父元素设置固定的高度
• 清除浮动法（clear）：
  1、新增一个块元素-----clear：both；
  2、伪类（不会影响页面布局）----

. clearfix:after{
content:"";
display:block;
clear:both;
}
. clearfix{
zoom:1;//IE6以下可用
}

3、开启BFC属性：

• 设置浮动
• 设置绝对定位
• 设置为行内元素（inline-block）
• 设置元素的over-flow为非visible值（不支持IE6以下版本）