zoukankan      html  css  js  c++  java
  • CSS

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    
    <head>
      <meta charset="utf-8">
      <title>正确解决高度塌陷</title>
      <style media="screen">
        .box {
          border: 1px solid;
        }
    
        .float {
          width: 100px;
          height: 100px;
          background: skyblue;
          float: left;
        }
    
        .clearfix:after {
          content:'';
          clear: both;
          display:block;
        }
      </style>
    </head>
    
    <body>
      <div class="box clearfix">
        <div class="float">
        </div>
      </div>
    </body>
    
    </html>

    补充:

    一, float 使父元素高度坍塌的原因 :

      子元素使用 float 后,使其脱离文档流 。 使父元素检测不到其尺寸。

    二,5种解决方案 :

    1,为父元素设置高度 , 缺陷是 :不灵活

    2,为父元素设置 float ,   缺陷是 :使父元素也脱离,没有真正解决

    3,为父元素设置 overflow:hidden , 缺陷是 :会隐藏相关的元素

    4,子元素后面添加 一个 clear:both 的 兄弟元素 , 缺陷是 : 使 html 添加了一个多余的结构

    5,为父元素添加一个 content:"";clear:both;display:block 的伪类 。 ( 可取 )

  • 相关阅读:
    Angularjs乱记
    tornado code
    angularjs中templateUrl的路径问题
    bat脚本禁用和开启本地连接
    http-server使用
    angularjs loading, animate
    tornado输出json
    cmder切换路径、设置命令别名
    python __setattr__和__getattr__
    滚动加载
  • 原文地址:https://www.cnblogs.com/500m/p/13339202.html
Copyright © 2011-2022 走看看