浮动与定位

浮动float

1：多个块级元素想同行显示，每个块级元素都要加浮动属性
2：块级元素浮动以后就脱离了块级元素的显示特点，不在表现为独占一行
   显示特点和行级元素类似，占用的实际大小和内容有关系。
3：标准盒子模型中的内容不会被浮动盒子影响显示，会正常显示文本
4:在浮动元素的后面添加非浮动元素，并给这个非浮动元素添加clean属性，
可以实现清除浮动带来的影响
5：上面的方法会存在一个新增无关元素的小问题，更好的处理方法是给浮动元素的
父元素添加after伪类，通过伪类给父元素添加一个无关元素，然后清除浮动

#body:after{

    display: block;

    content: "";

    clear: both;

}

    <div id="body" class="cleanfix">

定位

Position：定位：根据项目需要，通过相关的方法，让元素显示的位置发生偏移。

定位的方式：

static默认

relative 相对定位

absolute 绝对定位

fixed 固定定位

注意：只有元素采用了定位，top，left，right，bottom，z-index才可以使用

普通元素是没有这些样式的

定位属性基本上是配合浮动一块使用的

相对定位特点：

1：如果你仅仅给元素添加了一个相对定位，这个元素显示的位置

不会发生变化。

2：相对定位是相对于元素之前的位置进行的。

3：相对定位的元素之前显示的空间位置会被保留

4：z-index可以调整元素在z轴的显示顺序，值越大越靠前

  最大值1000!

绝对定位的显示特点：

1：找一个离他最近的，并且使用了定位的父元素来进行定位。

如果父元素没有使用定位，继续往上找父级元素，直到html

2：之前占用的空间不会保留

3：如果你想给一个元素添加一个绝对定位，最好的办法是找到这个

元素的直接父元素，然后给这个父元素添加一个相对定位。

固定定位

固定定位相对于整个屏幕进行定位

负边距

Margin：-px可以使区域宽度变大，忽略宽度属性

双飞翼布局

该布局可以保证主布局优先加载

该布局可以随屏幕尺寸变化自动伸缩主区域