Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug

简介: Container: padding: 20px; Float Float Clear 在浮动的DIV下面放一个有clear属性的DIV是我们做布局的时候常常用的一种方式。如果这个浮动的DIV和有clear属性的DIV是放在一个作为容器的DIV里面,而这个最外层的DIV由具有padding的时候,在IE浏览器里面,浮动的DIV和有clear属性的DIV之间会有一个奇怪的间隙。

 

Container: padding: 20px;
Float
Float
Clear

在浮动的DIV下面放一个有clear属性的DIV是我们做布局的时候常常用的一种方式。如果这个浮动的DIV和有clear属性的DIV是放在一个作为容器的DIV里面,而这个最外层的DIV由具有padding的时候,在IE浏览器里面,浮动的DIV和有clear属性的DIV之间会有一个奇怪的间隙。

如果你分别在IE和Firefox中查看右边的示例,你就会看到,在Firfox 中跟我我们预期的表现是一样的,只有外层容器和DIV之间有padding;而在IE中,回有一个20px间隙在浮动的DIV和有clear属性的DIV之间。

只是示范用到的代码:

<div style="padding: 20px;">

Container: padding: 20px; 

<div style="float:left; width: 50%; background: green; color: white;">

Float 

</div><div style="float:right; width: 50%; background: blue; color: white;">

Float 

</div>

解决这个问题的方法就是放弃使用最外层DIV容器的顶部和底部padding,该由内部DIV的顶部和底部margin来时实现。这样最终的效果在IE和Firefox中就是一样的。

相关文章
|
移动开发
快应用div纵向排列-----快应用无法使用float
在开发快应用布局时,要兼容各种大小屏幕的div的纵向排列,传统h5过度过来的同学会用到float:left但是在快应用中无法使这类写法生效 这时需要使用以上方向代替:display: flex; flex-direction: column; padding:20px; 此方法请写在需要纵向排列元素的父div中。
1139 0
快应用div纵向排列-----快应用无法使用float
|
容器
子div设置float后会导致父div无法自动撑开
注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
904 0
|
前端开发
子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度。   对父级div标签闭合前加一个clear清除浮动对象。 父div不自适应高度实例 .
793 0
|
前端开发
(转)CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。
940 0
|
Web App开发 容器
Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug
Container: padding: 20px; Float Float Clear 在浮动的DIV下面放一个有clear属性的DIV是我们做布局的时候常常用的一种方式。如果这个浮动的DIV和有clear属性的DIV是放在一个作为容器的DIV里面,而这个最外层的DIV由具有padding的时候,在IE浏览器里面,浮动的DIV和有clear属性的DIV之间会有一个奇怪的间隙。
573 0
|
6月前
|
存储 Java
百度搜索:蓝易云【Java语言之float、double内存存储方式】
由于使用IEEE 754标准进行存储,float和double类型可以表示非常大或非常小的浮点数,并且具有一定的精度。然而,由于浮点数的特性,它们在进行精确计算时可能会存在舍入误差。在编写Java程序时,需要注意使
97 0