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;,使它不受其它元素影响。

    谁需要清除浮动

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

  • 相关阅读:
    「WC2021」表达式求值
    [补]「WC2021」括号路径
    「CEOI2020」星际迷航
    「CEOI2018」斐波那契表示法
    CF913F
    CF1017G The Tree
    NOI2020 超现实树
    LOJ 6714 Stupid Product
    LOJ 575. 不等关系
    CF1267G
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/14185532.html
Copyright © 2011-2022 走看看