`
bazhuang
  • 浏览: 149647 次
  • 性别: 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> 

相关推荐

    css1--关于float的div撑不起父div的问题

    标题中的“css1--关于float的div撑不起父div的问题”指的是在CSS布局中常见的一个技术挑战。在网页设计中,我们经常使用`float`属性来实现元素的浮动,以便进行布局,比如创建多列布局或者使文本环绕图片。然而,...

    float样式对DIV的影响

    总结来说,`float`样式对`div`的影响主要包括改变元素布局、可能导致高度塌陷、实现内容环绕、元素堆叠以及需要清除浮动等。随着技术的进步,虽然新的布局方法正在取代`float`,但在某些场景下,它仍然具有不可替代...

    Test_div_float_2addr.rar_float

    标题中的"Test_div_float_2addr"暗示了这是一个针对浮点数除法操作的测试用例,而".rar_float"可能是由于历史原因或者特定的项目规范,将测试代码与浮点运算关联了起来。 在这个测试用例中,我们重点关注的是浮点数...

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

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

    CSS浮动属性Float详解 什么是CSS Float?

    如果我们没有正确地清除 Float,可能会导致元素出现在浮动元素的边界上。为了解决这个问题,我们可以使用 clear 属性来清除 Float。Clear 属性有四个可能的值:both、left、right 和 none。其中,both 是最常用的值...

    详细说明了div怎么在div上实现浮动的代码

    然而,浮动元素可能会引起父元素高度塌陷的问题,即当所有浮动子元素的高度都不足以填充父元素时,父元素的高度会自动缩小,导致下面的元素上移。解决这个问题的方法是使用clearfix方法,或者设置`overflow`属性,如...

    通过float实现两个div不换行

    由于`div#row2`没有设置`float`属性,它会按照正常的文档流排列,但由于`div#row1`已经向左浮动,所以`div#row2`实际上是在`div#row1`的右侧,实现了两个`div`不换行的效果。 然而,`float`属性使用时需要注意以下...

    子Div使用Float后撑开父Div的几种方法

    除了上述提到的方法,还可以使用其他一些技巧来解决浮动元素导致的父元素高度塌陷问题,例如: - 利用父元素的after伪元素进行清除浮动。通过CSS的伪元素添加内容,并应用clear样式,可以清除浮动而不影响DOM结构。...

    Float(浮动)导致的父容器背景不显示的解决方法

    然而,`Float` 的使用有时会导致父容器的一些意外行为,比如背景颜色无法正常显示,这通常被称为“浮动塌陷”。本文将详细介绍这种现象以及两种有效的解决方法。 ### 一、浮动塌陷现象 当一个元素设置了`float:...

    多个div能不换行吗?

    2. **使用 `float` 属性**:将 `div` 设置为浮动元素,它们会在其父容器中尽可能多地靠左(`float: left`)或靠右(`float: right`)排列。但是,这种方法可能导致父元素高度塌陷,需要额外的清理样式来修复。例如:...

    div+css常见兼容性问题

    在网页设计中,`div+css`是一种常见的布局方式,但它也伴随着一系列的浏览器兼容性问题。这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异,尤其是老版本的Internet Explorer(如IE6和IE7)与其他...

    html div没有被撑开的原因及解决办法

    这可能会导致`div`看起来是空的,或者部分内容被隐藏。下面我们将详细探讨这个问题的原因以及相应的解决办法。 **原因一:浮动(float)未清除** 在CSS中,当一个元素设置了`float:left`或`float:right`时,它会...

    一个挺常用的float布局div问题解决方法

    - 不同浏览器对float的渲染结果不一致,导致布局错乱。 - 特别是在IE6/IE7等旧版本浏览器中,float的兼容性问题更加显著。 2. 兼容性问题的具体案例 在文档中提到的情况是,一个父div包含一个边框,内部有多层子div...

    DIVCSS布局:CSS浮动float属性详解.doc

    浮动(float)属性是CSS布局中的一个关键特性,主要用于创建流式布局、多列布局以及解决元素定位问题。在传统表格布局中,我们依赖表格的对齐方式来组织内容,但在Web标准开发中,浮动属性成为了实现灵活布局的核心...

    div布局中float详解[收集].pdf

    然而,浮动元素会导致一些问题,其中最常见的是“浮动塌陷”。如果一个父元素的所有子元素都浮动了,父元素的高度可能会塌缩为0,因为它不再包含这些浮动元素。为了解决这个问题,我们需要“清除浮动”。 清除浮动...

    div+css整体布局

    由于`float`会使元素脱离正常文档流,可能会导致父元素无法正确包裹其内部浮动元素,此时需要使用`clear`属性来解决。常见的做法是在最后添加一个清浮动的`div`,或者对父元素使用`clearfix`类: ```css .clearfix::...

    如何终止DIV的float属性简单实现

    但是,如果不正确地处理浮动,可能会导致父元素的高度塌陷(即父元素无法正确包含其浮动子元素),从而产生布局问题。 为了终止`float`属性,我们可以使用CSS中的`clear`属性。`clear`属性有两个主要值:`both`和`...

    div横向排列

    但这种方法可能会导致父元素的高度塌陷,需要额外的CSS来解决这个问题,如使用清除浮动(clear:both)。 ```css div { float: left; /* 或者 right */ width: 200px; /* 自定义宽度 */ margin-right: 10px; /* ...

Global site tag (gtag.js) - Google Analytics