7.定位：position、浮动：float

1.定位：position

　　(1) position：定位
     　　 · static：默认值（没有定位）
     　　 · relative：相对定位。脱离文档流，但原来的位置保留
      　　· absolute：绝对定位。完全脱离文档流，原来的位置不会被保留
        　　　　 1.绝对定位是相对于最近有定位属性的父元素进行定位
         　　　　2.如果往上没有找到有定位属性的父级元素，则会相对于body进行定位
        　　　　 3.相对于父元素，区别于fixed。会随滚动条移动
     　　 · fixed：固定定位
         　　　　1.相对于浏览器窗口进行定位
        　　　　 2.窗口固定。不会随滚动条移动

<div style="position:relative">
    <div style="background:red">正常位置</div>
    <div style="position:absolute;top:20px;left:20px;">绝对定位</div>
</div>

　　(2) clip：剪裁
     　　 · clip:rect(top,right,bottom,left) 定义一个形状，元素会被裁剪到这个形状内
        　　注意：只能在元素设置了position:absolute或position:fixed才 起作用。且目前只有矩形能使用

<div style="position: relative;">
    <img src="../../assets/imgs/img3.jpg" width="100px"             
    style="position:absolute;clip: rect(20px, 100px, 100px, 20px);"/>
</div>

　　(3) z-index：堆叠
        注意：绝对定位可以层叠，相对定位不可以。相对定位会占据它原来的位置，绝对定位不会

<div style="position:relative">
    <div style="background:red;position:absolute;top:0;left:0"></div>
    <div style="background:green;position:absolute;top:20px;left:20px;z-index:2"></div>
    <div style="background:yellow;position:absolute;top:40px;left:40px"></div>
</div>

 

 

2.浮动：float

　　(1) float：浮动
     　　 · left：左浮动
      　　· right：右浮动
         　　区别：display:inline将块元素，如：p、div等在一行显示

<div>
    <div style="float:left"></div>
    <div style="float:left"></div>
    <div style="float:left"></div>
</div>

　　(2) clear：清除浮动
      　　· left：  清除左浮动
      　　· right：清除右浮动
     　　 · both：清除所有浮动

<div>
    <div style="float:left"></div>
    <div style="float:left"></div>
    <div style="clear:both"></div>
</div>

　　(3) overflow：溢出
      　　· visible： 不裁剪，会显示在内容框之外
     　　 · hidden：裁剪，不提供滚动机制
      　　· scroll：   裁剪，提供滚动机制
     　　 · auto：    内容超出父元素容器后自动加滚动条
     　　 · ::-webkit-scrollbar：超出滚动，但是不显示滚动条

　　

//overflow溢出
<div style="overflow:visible">长风破浪会有时</div>
<div style="overflow:hidden">长风破浪会有时</div>
<div style="overflow:scroll">长风破浪会有时</div>
<div style="overflow:auto">长风破浪会有时</div>

//超出滚动，但是不显示滚动条
<div class="pop">长风破浪会有时</div>
.pop{
    overflow: scroll;
}
.pop::-webkit-scrollbar{
    display: none;
}

　　(4) 清除浮动/防止高度塌陷：
　　　  原因：由于父元素的子元素设置了浮动，会导致父元素不能被撑开，即所谓的高度塌陷
      　　方法一：浮动元素的父级元素设置overflow:hidden
      　　注意：如果在ie6中，还要设置zoom:1或给父元素设置具体的高度

      　　方法二：浮动元素的父级元素设置::after{content:'';display:block;clear:both;}

     　　 方法三：浮动元素的同级下添加一个空标签，并且设置clear:both
     　　 注意：ie6和ie7浏览器，要给clearfix这个class添加一条zoom:1

　　

//方法一：浮动元素的父级元素设置overflow:hidden
<div style="overflow:hidden;zoom:1">
    <div style="float:left"></div>
</div>
//方法二：浮动元素的父级元素设置伪元素
<div class="clearfix">
    <div style="float:left"></div>
</div>
.clearfix:after{
    content:'';
    display:block;
    clear:both;
}
//方法三：浮动元素的同级下添加一个空标签，并且设置clear:both
<div style="clear:both">
    <div style="float:left"></div>
</div>