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

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

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

如果给父元素加上overflow:hidden

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
width: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;
width:200px;
zoom:1;
/*overflow:hidden;*/
}

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

zoom:1-hasLayout的更多相关文章

  1. zoom,zoom与haslayout的关系,zoom与transform: scale( )的区别

    1.zoom:(缩放)

  2. IE浏览器bug罪魁祸首--hasLayout

    IE浏览器一直都是前端程序员最头疼的,IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 认识hasLayout--haslayout是Windows In ...

  3. IE下的haslayout特性

    什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织 ...

  4. [css] haslayout

    原文:http://blog.sina.com.cn/s/blog_51048da701018o29.html IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部 ...

  5. 那些年,我们被耍过的bug——haslayout

    你被IE的bug耍过几次了? IE,这个令所有网站设计人员讨厌,但又不得不为它工作的浏览器.不论是6.7还是8,它们都有一个共同的渲染标准haslayout,所以haslayout 是一个非常有必要彻 ...

  6. CSS:haslayout知多少

    我们都知道浏览器有bug,而IE的bug似乎比大多数浏览器都多.IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念.   因为布局是专门针对显示引擎内部工作方 ...

  7. IE haslayout

    我们都知道浏览器有bug,而IE的bug似乎比大多数浏览器都多.IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念.   因为布局是专门针对显示引擎内部工作方 ...

  8. haslayout知多少

    我们都知道浏览器有bug,而IE的bug似乎比大多数浏览器都多.IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念.   因为布局是专门针对显示引擎内部工作方 ...

  9. 认识hasLayout——IE浏览器css bug的一大罪恶根源

     原文地址:http://neverned.blog.163.com/blog/static/1265524200933021130561/   什么是hasLayout?hasLayout是IE特有 ...

  10. 认识hasLayout——IE浏览器css bug的一大罪恶根源 (转)

    认识hasLayout--IE浏览器css bug的一大罪恶根源 转 什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要 ...

随机推荐

  1. apk文件分析原则

    如果在dex生成的jar文件里没有发现关键内容的话,就要注意jar里面的native函数以及loadlibrary操作,从而可以判断出加载了哪些so,调用了什么函数.就不会出现判断不出是不是加载了某s ...

  2. msf常用命令

    msf > search -r great -t exploits search命令查找rank为great的exploit msf > setg RHOST 192.168.1.102 ...

  3. Qt5:无边框窗口拖动

    在窗口程序中,无边框窗口程序一般需要特殊处理才能拖动 Qt中,要实现无边框窗口的拖动,需要重新实现 mousePressEvent 和 mouseMoveEvent 俩虚函数 void Widget: ...

  4. 并发数据(锁)ReaderWriterLockSlim

    ReaderWriterLockSlim 类 ReaderWriterLockSlim 类支持三种锁定模式:Read,Write,UpgradeableRead.这三种模式对应的方法分别是 Enter ...

  5. iOS中4种判断网络请求的方式(系统状态栏、AFNetworking、Reachability、自定义)

    iOS 实时判断网络状态 方法一:利用系统状态栏判断网络状态 // 状态栏是由当前app控制的,首先获取当前app UIApplication *app = [UIApplication shared ...

  6. JQuery实现仿腾讯的固定导航栏

    1.描述 窗口滚动一定高度之后才让导航栏固定 2.要点 浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); ...

  7. Unity加载本地图片的2种方式

    1. 使用 WWW 加载,详细查看 unity3d 官方文档. 2. 使用 System.IO 加载,lua 代码如下: local File = luanet.import_type("S ...

  8. office web apps部署(一)

    准备两台服务器,A服务器作为域控制器,B服务器安装owa 1.配置域服务器A 参考 2.B服务器加入A所创建的域 参考 3.B服务器安装owa 参考 注意: 1.B服务器加入域后,使用A服务器的管理员 ...

  9. springMVC入门配置及helloworld实例

    1. 新建web project 2. 往lib里copy必须的jar 3. 改写web.xml <?xml version="1.0" encoding="UTF ...

  10. md5sum校验文件完整性

    1.简介 MD5算法常常被用来验证网络文件传输的完整性,防止文件被人篡改. MD5 全称是报文摘要算法(Message-Digest Algorithm 5),此算法对任意长度的信息逐位进行计算,产生 ...