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

    谁需要清除浮动

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

  • 相关阅读:
    preventDefault
    YII2中的Html助手和Request组件
    yii2 输出json的方法
    FormData异步上传
    通过Ajax方式上传文件,使用FormData进行Ajax请求
    Yii设置Cache缓存的方法
    exif_imagetype() 函数在linux下的php中不存在
    Thinkphp整合各个功能
    PHP cURL库函数抓取页面内容
    javascript实现打印功能
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/14185532.html
Copyright © 2011-2022 走看看