清除浮动-第十三天

清除浮动

• 清除浮动带来的负面影响

  • 因为子元素浮动了,脱离标准流,不再占用之前的位置导致无法撑开没有设置高度的父元素
  • 父元素的高度为0
  • 进而导致后续结构直接跑上来,所以我们要清除掉这种负面影响

• 额外标签法

  • 在最后一个盒子下创建一个块级元素并设置样式clear:both

• 单伪元素清除浮动

  • .clearfix::after{
    content:'',
    display:block,
    clear:both;
    }
    

• 双伪元素清除浮动

  • .clear::before,
    .clear::after{
        content:'';    
        display:table;
    }
    

• 直接给父元素设置overflow:hidden

  • 让父元素自动检测高度

  • .box{
        width:1226px;
        margin:0 auto;
        overflow:hidden;
    }
    

定位

• 常见应用场景
  • 解决盒子与盒子之间的层叠问题
  • 定位之后的元素层级最高,可以层叠在其他盒子上面
• 可以让盒子始终固定在屏幕中的某个位置,不随滚动条滚动