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

    浮动

    使元素浮动绝对定位,都会脱离文档流
    使元素浮动:

    1. 设置 float 属性,不为 none。 虽然脱离了文档流但是仍然会占据位置。
    2. 设置 position: absolute;。脱离文档流并且不占位。

    浮动的好处

    1. 文字环绕效果
    2. 双飞翼布局
    3. ...

    清除浮动

    清除浮动的方式有很多,这里就介绍些我用过比较好的

    1. clear:both;

    下面是综合设置,推荐使用,使用方式:<div class="clearfix"></div>

    /* 清除浮动 */
    .clearfix::before,
    .clearfix::after{
      content: "";
      display: block;
      height: 0;
      line-height: 0;
      visibility: hidden;
      clear: both;
    }
    
    1. overflow: hidden;

    设置overflow: hidden;有两个作用:

    1. 溢出隐藏
    2. 设置当前元素 为绝缘容器,不受其它元素影响,也不影响其它元素。这里的影响主要指元素浮动产生的影响。
      也就是说,当一个元素,因为它的兄弟元素浮动(这里指 float )而被影响了,可以给这个元素添加overflow: hidden;,使它不受其它元素影响。

    谁需要清除浮动

    有时候,为了排版需要,一个父级元素里的所用子元素都脱离了文档流,导致父级元素高度塌陷,此时,就需要给父级元素清除浮动。以保证和父级并级的其它元素不会排版错乱。

  • 相关阅读:
    [BZOJ3172]单词
    [BZOJ2434]阿狸的打字机
    [BZOJ1195]最短母串
    [codeforces743E]Vladik and cards
    [BZOJ2553]禁忌
    [BZOJ1009]GT考试
    [BZOJ3507]通配符匹配
    [BZOJ4027]兔子与樱花
    test20190308
    Luogu P2742 模板-二维凸包
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/14185532.html
Copyright © 2011-2022 走看看