zoukankan      html  css  js  c++  java
  • 清除浮动的几种方法

    清除浮动的几种方法:

      1父元素加float

      2父元素加overflow:hidden

      3给子元素最后加1个空div,并clear:both

      4利用给父元素加.clearfix类清除

    /*第一种clearfix方法 有时候会出现一些bug,第2种方法可以解决*/
    .clearfix::after,.clearfix::before {
        display: table;
        content:"";
    }
    .clearfix::after {
        clear: both;
    }
    .clearfix {
        *zoom:1 ;/*IE/7/6*/
    }
    /*第二种clearfix方法*/
    .clearfix {
        zoom: 1;
        display: table;
      /*可以添加100%继承父元素防止元素内容收缩*/ }

      5.利用BFC特性清除浮动影响

    利用display:table都是让元素具有了BFC特性,相当于建立了一个新的块级格式化上下文,把当前元素包含并与其他元素隔离,具有BFC特性的元素里的内部元素与外部元素互不影响

    BFC的一些作用:1.可以解决父元素在子元素浮动情况下高度坍塌的问题2.解决外边距重叠

    形成BFC的方法有下面几种:

      1.float的值不为none。
      2.overflow的值不为visible。
      3.display的值为table-cell, table-caption, inline-block中的任何一个。
      3.position的值不为relative和static。

  • 相关阅读:
    notion笔记
    PHP性能分析工具xdebug+qcachegrind
    Homebrew1.5之后安装PHP和扩展
    Yii2 创建新项目目录
    MAC的一些实用
    Item2 + zsh
    YII2 RBAC Admin User权限相关
    ITEM 2 MAC OSX 功能略强大的终端
    MAC终端配色Solarized
    微服务 SpringCloud + docker
  • 原文地址:https://www.cnblogs.com/zmshare/p/6121601.html
Copyright © 2011-2022 走看看