浮动元素margin-bottom失效 — IE6盒模型

HTML5学堂:虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout,其内部浮动子元素也参与到了容器的高度计算之中

在 IE6 IE7 IE8(Q)中,容器div的 'zoom:1' 触发了 hasLayout,其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 'margin-bottom' 消失;

在其他浏览器中,容器的 'overflow:hidden' 创建了新的 Block Formatting Context ,同样,其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的 margin 均正常。

例子:第一个div子元素设置了底部的margin值,在清除浮动之后无效

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动元素的影响-独行冰海</title>
<style>
*{margin: 0;padding: 0;}
.con-float-box{
width: 600px;
border: 1px solid #f00;
}
.con-float-box div{
float: left;
width: 198px;
height: 98px;
margin: 20px 0;
border: 1px solid #00f;
}
.box-pos{
width: 600px;
height: 100px;
margin-top: 10px;
border: 1px solid #000;
background: #ccf;
}
.clearfix:before,.clearfix:after {
content: "\200B";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
</style>
</head>
<body>
<div class='con-float-box clearfix'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class='box-pos'>为第一个div设置了清除浮动的类clearfix,进行了相应的处理,此时,在谷歌浏览器当中正常,但是在IE6,依旧不正常,第7和第8个块底部的margin没有生效。</div>
</body>
</html>

解决方案

为容器显式地设置高度。若容器高度不定,则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性,可以通过为容器设置 'padding-bottom' 达到相似的效果。

只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值,这三个条件中任意一项,均可解决此问题。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(四)——文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

3399
来自专栏AI科技大本营的专栏

学Java还是Python?一张图告诉你!

Java 和 Python 一直都是两种很火很强大的编程语言,对于刚开始起步学习编程的同学来说,会迷惑且最经常问的问题是,我该学 Java 还是 Python,...

3497
来自专栏HTML5学堂

浮动 其实真的很简单

码匠(HTML5学堂):传说中的水槽原理真的正确、严谨吗?如何才能轻松理解浮动的基本原理,实现网站浮动布局?

494
来自专栏iKcamp

微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联

§ 视图与数据关联 本文配套视频地址: https://v.qq.com/x/page/z0554wyswib.html 开始前请把 ch3-3 分支...

16510
来自专栏落花落雨不落叶

关于Html与css的一些解释

27712
来自专栏PPV课数据科学社区

是学习Java还是Python?一张图告诉你!

Java 和 Python 一直都是两种很火很强大的编程语言,对于刚开始起步学习编程的同学来说,会迷惑且最经常问的问题是,我该学 Java 还是 Python,...

3417
来自专栏HTML5学堂

CSS 1.0~3.0选择器(上)

HTML5学堂:我们学过了最为基础的id,类名和标签名选择器,然后就一直用它们了吗?如果是这样,那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅,将C...

2725
来自专栏吴老师移动开发

【iOS开发】MVVM中使用RACCommand做网络请求

ViewModel里面有一个网络请求,在开始请求的时候要在页面上显示加载状态(转圈圈),结束请求的时候隐藏加载状态。

1183
来自专栏对角另一面

【译】怎样处理 Safari 移动端对图片资源的限制

原文作者:Thijs van der Vossen 本文翻译自《How to work around the Mobile Safari image resou...

2310
来自专栏编程

类选择符和ID选择符

类选择符 ? HTML代码: CSS代码: div { width: 200px; height: 200px; border: 1px solid #000;...

1867

扫码关注云+社区