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中就是一样的。

目录
相关文章
|
前端开发
web前端学习(二十四)——CSS3浮动属性(float)、清除浮动属性(clear)的相关设置
web前端学习(二十四)——CSS3浮动属性(float)、清除浮动属性(clear)的相关设置
web前端学习(二十四)——CSS3浮动属性(float)、清除浮动属性(clear)的相关设置
|
移动开发
快应用div纵向排列-----快应用无法使用float
在开发快应用布局时,要兼容各种大小屏幕的div的纵向排列,传统h5过度过来的同学会用到float:left但是在快应用中无法使这类写法生效 这时需要使用以上方向代替:display: flex; flex-direction: column; padding:20px; 此方法请写在需要纵向排列元素的父div中。
1134 0
快应用div纵向排列-----快应用无法使用float
|
容器
子div设置float后会导致父div无法自动撑开
注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
902 0
|
前端开发
(转)经验分享:CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。        前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。        写在前面的话:        由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。
794 0
|
前端开发 容器
CSS中float和Clear的使用
    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向。
1119 0