CSS的定位和浮动

Posted 2020-08-06 冉兵成

#CSS定位、浮动
##1、
标准文档流：指的是在不使用定位或者其他排版或者CSS，各个元素排列的规则实际上就是CSS规定网页默认的排列方式。
负边距：会使文档流发生偏移，但是不会脱离文档流，不会占据原来的空间。
##2、相对定位：
    position:relative
    1、设置了相对定位后不会影响这个元素本身
    2、不会脱离文档流
    3、它原本所占的空间仍被保留
    4、如果没有设置相对定位偏移量，不会影响这个元素本身。
    div{
    position:relative;设置了div可以相对位移
    left:100px;
    top:100px;
        }设置div相对于body移动
##3、绝对定位：
    设置：position:absolute
    1、会让元素脱离文档流，以文档作为父类，如果找到了定位父级，会以定位父级作为父类
    2、设置了绝对定位了之后，行级元素也支持设置高宽，即默认加上了一个display:inline-block
    3、设置绝对定位之后，这个元素就相当于飘起来了，这个时候对它位移，是相对于body位移。
       它也不会受它的父类的控制了。    
    4、后飘的会盖在先飘的上面，比如先飘了div1，再飘div2，这个时候div2会在最上面
    5、层级优先数：z-index：数字。数字越大就越优先显示。
###4、固定定位：
    position：fixed。
    固定定位也脱离了流，不受流控制。
    它也可以位移，left、top、right、bottom
###5、浮动
    float:right left none(默认的，不浮动)
    浮动会脱离文档流，且不占据原来的位置，相当于飘起来了。
        按照一个方向移动直到碰到前一个元素的边界或者父元素的边界就停止下来。
            行级元素设置浮动后会默认加上dispaly:inline-block,即默认会把这个元素变成行内块级元素，
            也就是说它会有高宽属性。
        前面的元素设置了浮动，后面的元素不想跟着浮动。解决方法：在两部分中间加一个空的div1
        利用这个div1清除浮动。清除左、右浮动：clear：left clear:right   都清除：clear：both