外边距的重叠

在网页中相邻的上下方向的外边距会发生外边距的重叠
相邻兄弟元素的外边距重叠后会取最大值的一个！
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素！

！高度塌陷

一般我们不把父元素的高度设为固定值 ！但是这样子元素浮动后会造成父元素的高度塌陷，我们要尽量避免这种事情！解决方法就是开启BFC！

解决高度塌陷

首先了解BFC： BFC（Block Formatting Context）格式化上下文，是css中的隐含属性！

开启BFC后的特点

1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素覆盖
3.开启BFC的元素可以包含浮动的子元素

开启BFC的方法：只能间接开启

1.设置元素的浮动（不推荐）
2.设置元素的绝对定位（不推荐）
3.设置元素为inline-block（不推荐）
4.将元素的overflow设置为一个非visible的值（推荐）

解决塌陷的最佳方法

1.为一个元素最后添加一个空的内容，2.将元素设置为块
3.清除浮动元素的影响

   元素名:after{
        /*添加一个内容*/
        content: "";
        /*转换为一个块元素*/
        display: block;
        /*清除两侧的浮动*/
        clear: both;
    }

开启hasLayout(类似BFC）解决塌陷：IE6以下运用

      元素名{
        zoom: 1;
    }

清除浮动（clear）

clear用于清除元素周围的浮动元素的影响，也就是元素不会因为上方出现了浮动元素而改变位置
可选值：

• left：忽略左侧浮动
• right：忽略右侧浮动
• both：忽略全部浮动
• none：不忽略浮动，默认值

定位 position

相对定位（relative）:通过left,top,bottom,right 设置偏移量

特点：--不会脱离文档流 ，没有偏移量不会有变化，相对元素本来的位置进行定位，不会修改元素性质，提升级别，不会修改元素性质

绝对定位（absolute）: 设置偏移量同上

特点：脱离文档流，相对于开启定位的祖先元素（离他最近）的位置，提升层级，会将元素变为块元素

固定定位（fixed）：和绝对定位差不多

特点：永远相对于窗口的初始位置（0，0）IE6 不支持