解决高度塌陷，清除浮动，相对、绝对、固定定位

解决高度塌陷：

BFC特性：

1，父元素的垂直外边距不会和子元素重叠

2，开启BFC的元素不会被浮动元素所覆盖

3，开启BFC的元素可以包含浮动的元素

4，将元素的overflow设置一个非visible的值 hidden；副作用小

如何开启：1，设置元素的浮动 2，设置绝对定位 3，设置元素为display：inline-block

hasLayout:  zoom:1;IE低版本浏览器解决高度塌陷

添加一个class=clear的div兄弟元素，样式设为clear：both；页面中多了一个结构

推荐解决方式：

.clear fix：after{content：‘’；display：block；cleat：both；}，最好的方式

.clearfix{zoom:1;}

清除浮动：

clear：清除其他元素浮动对当前盒子的影响

left清楚左侧浮动的影响

right清除右侧浮动的影响

both清楚两侧（影响最大的那个）

定位：任意摆放元素

position:relative;相对定位，不会脱离文档流 相对于元素原来的位置

然后设置上下左右的偏移量才能使用 left：100px 距离左边有一百像素

绝对定位：position：absolute；绝对定位，脱离文档流 相对于离他最近开启定位的父元素

如果没有就以body为原点 内联元素绝对定位改变成块

固定定位；position：fixed；脱离文档流 大部分特点和绝对定位一样，不设置偏移量位置不改变

以浏览器窗口定位 固定在窗口不会因为滚动条而滚动