zoukankan      html  css  js  c++  java
  • 浮动的清除

    简述

      如果有一个父盒子,里面有非常非常多的小盒子,多到页面要拉很下才看得到底,且每天都要往父盒子里塞新的小盒子,那么父盒子就不方便指定高度了。

      如果一个父盒子分为左右两部分,但做优两部分实际内容不一样高,那么这个父盒子的高度就不容易给了。

      所以我们渴求一种理想中的情况,不给父盒子高度,让盒子撑开父亲,有多少孩子,父亲就有多高。

    案例

      我们现在整一个父盒子不指定高度,然后嵌套两个小盒子进去

       我们看到,父盒子会被小盒子撑开

       现在我们给两个小盒子加上浮动效果,我们可以看到大毛和二毛会在一行内显示,但是父盒子的高度就不对了,变成了0

      其实原因是浮动的元素是不占位置的,父元素是标准流,看不到浮动的孩子,高度就变成0了。

      此时我们如果在下面加一个盒子

      盒子就会跑到上面去,因为父元素的高度只有0,这引出了我们的问题——为什么要清除浮动

    为什么要清除浮动

      由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占位置,最后父盒子高度为0,就会影响下面的标准流盒子。

    解决办法——清除浮动

      清除浮动的本质就是清除浮动元素造成的影响

      如果父盒子本身有高度,就不需要清除浮动

      清除浮动后,父级就会根据浮动的子盒子自动检测高度。父盒子有了高度,就不会影响下面的标准流盒子了。

      清除浮动的语法是:选择器{clear: 属性值;}

      清除浮动的策略是:闭合浮动。闭合浮动其实就是孩子浮动太皮了,父盒子把浮动的影响闭合起来,只让影响在父盒子里面。

    清除浮动的方法

    额外标签法

      额外标签法也称隔墙法,是W3C推荐的做法。

      额外标签法就是在浮动元素末尾添加一个空的标签,该空标签就可以使浮动闭合,空标签就是一堵墙,把浮动元素闭合起来了。

      我们在后面添加一个新标签,使用属性clear:both

      此时父盒子的高度就会随着子盒子的数量变化,直到装满盒子,这是因为有一堵墙隔着。

      同时下面的标准流盒子也不会占据上方盒子的位置了,因为上方的父盒子有高度。

      这种方法通俗易懂,书写方便。但缺点是添加了无意义标签,结构化较差。

      需要特别注意的是,这个新增的盒子必须是块级元素或br,只有块级元素和br才能成为墙。

    父级添加overflow属性

      可以给父级元素添加overflow属性,值可以是hidden、auto、scroll。

      子不教,父之过,孩子的问题父亲解决。

      overflow除了能清除浮动,还能解决外边距合并的问题,详细用法后面的博客会讲。

    父级添加after伪元素

      通过添加after伪元素,就可以清除孩子浮动的影响

      具体什么是伪元素之后的博客详解,其本质就是在after位置添加一个假的元素,是额外标签法的升级版。

    父级添加双伪元素

      双伪元素也是给父盒子添加

      其本质就是在前后都加墙,把孩子的浮动完全闭合起来,这种思想契合我们的浮动闭合

       

     

      

  • 相关阅读:
    推荐一款idea 翻译插件 ECTranslation
    idea 执行maven 命令
    Future Clalback使用案例
    newCachedThreadPool使用案例
    线程池 原理学习笔记
    使用curator框架简单操作zookeeper 学习笔记
    mongo aggregate 用法记录
    ReentrantLock 学习笔记
    VUE:过渡&动画
    VUE:生命周期
  • 原文地址:https://www.cnblogs.com/qq2210446939/p/14037783.html
Copyright © 2011-2022 走看看