zoukankan      html  css  js  c++  java
  • zoom:1-hasLayout

    在现代浏览器,如果子元素float,则父元素不会自动被撑开

    #nofloatbox {
    border: 1px solid #FF0000;
    background: #CCC;
    200px;
    }

    #floatbox {
    float: left;
    100px;
    height: 100px;
    border: 1px solid #0000FF;
    background: #00FF00;
    }
    </style>

    如果给父元素加上overflow:hidden

    #nofloatbox {
    border: 1px solid #FF0000;
    background: #CCC;
    200px;
    zoom:1;
    overflow:hidden;
    }

    或者给最后一个子元素加上clear:both

    #nofloatbox > div:nth-child(2){
    clear:both;
    }

    都会有清除浮动的效果.

    zoom:1是针对ie的属性,可以激活hasLayout属性,关于hasLayout 

    haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元 素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)
    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误,就是源于 haslayout。如果它设置成了true,它就不得不去渲染它自己,因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单 词,如果haslayout没有被设置成true,那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。

    #nofloatbox {
    border: 1px solid #FF0000;
    background: #CCC;
    200px;
    zoom:1;
    /*overflow:hidden;*/
    }


    <body>
    <div id="nofloatbox">
    <div id="floatbox"></div>
    <div></div>
    </div>

  • 相关阅读:
    DQL 组合连接多个字段
    twig的 function 学习
    twig的 tests 学习
    贴一个自定义的 symfony 的表单皮肤 应用bootstrap效果
    symfony2使用form指定的checkbox,设置其属性disabled
    twig 模板设计 快速入门手册 中文
    MyEclipse中J2ee项目的一些Java文件报错!
    JavaScript的三种代码书写格式
    VB的学习及使用总结
    CSS优先级的说明
  • 原文地址:https://www.cnblogs.com/koleyang/p/4871752.html
Copyright © 2011-2022 走看看