zoukankan      html  css  js  c++  java
  • CSS float 父元素高度自适应

    <html>
    <head><title></title>
    <style type="text/css">
    *{margin:0 ;padding:0;}
    .content{
    border:1px solid red;
    }
    .fl{float:left}
    </style>
    </
    head> <body>   <div class="content">   <div class="fl" >1</div><div class="fl">2</div>   </div> </body> </html>

    结果如下:

    class 拥有float的属性已经脱离正常的文档流,所以父元素中相当于没有正常文档流填充。高度为0,我们想让父节点高度自适应float元素的高度。

    要在父元素里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。 例如某一个wrapper如下定义: .content{ overflow:hidden; zoom:1; margin:5px auto;} 

    有时候不是我们失去了目标,而是失去了方向。
  • 相关阅读:
    绘制八卦阵
    绘制奥运五环
    绘制渐变的圆
    实验报告
    大学排名
    第一条爬虫
    自己的第一个网页
    科学计算与可视化
    类和正则表达(自动更正 代数运算)
    预测比赛
  • 原文地址:https://www.cnblogs.com/871735097-/p/4747637.html
Copyright © 2011-2022 走看看