`
bazhuang
  • 浏览: 147892 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

div的float导致的问题

阅读更多
原来的想法是想在左边显示一棵树,右边放一个div显示内容,所以右边的div就用了float:right。
代码如下:
<style type="text/css">
.content{
	position:relative;
	float:left;
	width:500px;
}

.tab_content{
	background-color:#C3DAF9;
	padding:2px;
}

.div{
	background-color:#FFFFFF;
}
</style>
</head>

<body>
<div class="content">
<div class="tab_content">
<div class="div">content</div>
</div>
</div>
 </body>

这样就会发现在ie下content的背景色不是白色,得不到想要的结果,而当把content中的
position:relative;float:left;删除掉,就可以正常显示了。

或者在tab_content或div的css中添加width:100%;也就是设置一个width就可以了。即使是设置为0px也是可以得到想要的结果的。

不知道这个问题的原因是什么?在firefox下都正常显示。
分享到:
评论
4 楼 afcn0 2008-01-14  
没有ie6但是ie7 ff是一样的,找个ie6太麻烦,可能ie6 relative以及float有问题吧,没验证,不保证是
3 楼 bazhuang 2008-01-14  
缺少了这段话position:relative;,当然是可以的了,如果加上的话,你再试一下吧。我这是不行的了
2 楼 bazhuang 2008-01-14  
缺少了这段话position:relative;,当然是可以的了,如果加上的话,你再试一下吧。我这是不行的了
1 楼 ajaxgo 2008-01-09  
<pre name='code' class='xml'>&lt;style type="text/css"&gt;  
.content{
    float:left;  
    width:500px;  
}  
 
.tab_content{  
    background-color:#C3DAF9;  
    padding:2px;  
}  
 
.div{  
    background-color:#FFFFFF;  
}

.clear {
   clear:both;
}
&lt;/style&gt;  
&lt;/head&gt;  
 
&lt;body&gt;  
&lt;div class="content"&gt;  
     &lt;div class="tab_content"&gt;  
          &lt;div class="div"&gt;content&lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;</pre> 

相关推荐

    float元素浮动后高度不一致导致错位的解决办方法

    当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display...

    高度导致IE6中两个DIV有3px空隙问题_margin-right/left可解决

    最近做的页面基本上都是自适应的,经常使用如下的...左边的DIV使用float,右边的DIV则自适应。昨天给右边的DIV添加了一个高度,发现在IE6中出现了问题。(以下两个实例的区别只能在IE6中才能看到) 左边DIV 此DIV未

    用clearfix:after消除css浮动解决外部div不能撑开问题

    在写HTML代码的时候,创造在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子: 复制代码代码如下: ...

    46种常见的浏览器兼容性问题大汇总

    15. float的div闭合;清除浮动;自适应高度 3 16. 高度不适应 3 17. IE6下图片下有空隙产生 3 18. 对齐文本与文本输入框 3 19. LI中内容超过长度后以省略号显示 3 20. 为什么web标准中IE无法设置滚动条颜色了 3 ...

    常用的DIV+CSS的基本框架结构但不推荐都放一个div里

    将所有内容都放入一个 DIV 元素中可能会导致页面的布局混乱、样式难以控制和维护成本增加。例如,如果我们将所有内容都放入一个 DIV 元素中,那么我们可能需要使用更多的 CSS 样式来控制页面的布局,而这可能会导致...

    CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器

    在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子: HTML4STRICT代码: ...

    在IE下:float属性会影响offsetTop的取值

    因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之类的写法后,竟然会导致取到的值不一样。 没有使用float:left;取的到值是正常值200; &lt;!DOCTYPE...

    HTML中两个tabs导航冲突问题的解决方法

    原因:没有仔细定位到每个div里面的控件,使用了全局的定义导致了会一起变化; 后来一层层精确定位到了各个的层,就OK啦. CSS: div .ivu-tabs-nav-scroll .ivu-tabs-nav{ float: right; } div .ivu-modal-body ....

    CSS 清除浮动元素方法 整理

    例如: &lt;div xss=removed&gt; &lt;div xss=removed&gt;Some Content&lt;/div&gt; &lt;/div&gt; 此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动,而脱离了文档流,导致父元素的height为...

    CSS 清除网页浮动 经验

    在进行浮动布局时,大多数... 此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动,而脱离了文档流,导致父元素的height为零。  若将代码修改为: &lt;div style=”

    CSS清除浮动方法总结

    假设一个 div 内部有个浮动的 div,当内部 div 的高度要比外层的父级 div 高度大时,将会导致父级 div 高度无法随着内部 div 的高度自适应,这是由于浮动元素已经脱离了正常文档流,因此无法对父级元素产生影响。...

    css之clearfix的用法深入理解(必看篇)

    如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开。看下面的例子:Div布局如下: Css代码如下: CSS Code复制内容到剪贴板 .out{border:1px solid...

    JS中使用 after 伪类清除浮动实例

    以前清除浮动的时候总是在想要清除浮动的元素后面添加 &lt;div xss=removed&gt;&lt;/div&gt; 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是...一般情况下,如果父层内部有浮动(float)可能导致父层的高度为0,加上cl

    display:inline-block的使用示例

    不就行了 但是这个有一个问题,你必须把外面的div的宽度设置的很长已满足大于所有子div的宽度,而实际中由于子页面中个数不定,因此外面的div块的宽度不能确定,若是外面的div块的宽度不够 就会导致部分子div块移动...

    css中的content: “.” 有什么用?为什么要用他?

    在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。 这个clearfix的CSS使用了after这个伪...

Global site tag (gtag.js) - Google Analytics