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

float导致外部容器高度无法自适应

 
阅读更多
让<a>标签显示再#left的右侧,写如下代码,想要#layout也被撑开,发现ie6,ie7正常,但ie8与ff中#layout的高度与a标签相同,没有被撑开。
例:
<div id="layout">
<div id="left">
<strong>XML</strong>
<p>前推荐遵循的是W3C于2000年10月6日发布的XML1.0和HTML一样,XML同样来源于SGML,但XML是一种能定义其 它语言的语。<br /><br /> XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。</p>
</div>
<a href="http://xiaogai1010.blog.163.com/blog/#">链接1</a>
<a href="http://xiaogai1010.blog.163.com/blog/#">链接2</a>
<a href="http://xiaogai1010.blog.163.com/blog/#">链接3</a>
<a href="http://xiaogai1010.blog.163.com/blog/#">链接4</a>
</div>
<style type="text/css">
<!--
a:hover {
background-color:#fff;
}
#layout {
border: #35bb0c 5px solid;
width: 400px;
background-color: #f2f2f2;
}
#left {
border: #d4ca25 5px solid;
width: 200px;
float: left;
background-color:#fff;
}
-->
</style>

解决方法:(与几种闭合浮动标签的方法相似)
(1)给#layout加属性:{float:left;}
(2)给#layout加属性:{overflow:hidden}
(3)给#layout加属性:{display:table}
(4)#layout:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; zoom:1}
四种方法都可以使#layout被float元素撑开
分享到:
评论

相关推荐

    里面的div怎么撑开外面的div让高度自适应

    标题和描述中提到的问题正是关于这个需求:如何让内部的 `div` 撑开外部的 `div`,使得外部 `div` 的高度能随内容增多而自适应。 在正常情况下,如果内部 `div` 的内容高度超过外部 `div` 的固定高度,外部 `div` ...

    CSS左右两列自适应高布局示例代码

    这两个容器分别包裹了左右两列的内容,通过设置外部容器的宽度为750px,并使用margin: 0px auto实现水平居中。 接着,.da_div下的两个子元素使用了CSS的float属性,.top_200设置为向左浮动,宽度为200px,而另一子...

    css 水平居中,垂直居中,自适应宽度的代码

    **总结**: 外部容器的定位方式决定了其是否能够自适应宽度,通常选择 `float: left;` 或 `position: absolute;`。内部元素则必须使用 `position: relative;` 并且通过 `right: 50%;` 实现水平居中。 #### 二、垂直...

    浏览器兼容

    外部包裹的div应避免固定高度,而使用 `overflow: hidden` 以实现自适应。 **7. 手形光标** IE与标准浏览器对光标的处理不同,应分别设置 `cursor: pointer` 和 `cursor: hand`。 **8. IE6双倍边距BUG** IE6中,...

    css实现两栏固定中间自适应的方法

    中间栏被放在最前面,外部有一个包裹容器。CSS代码如下: ```css #container { position: relative; } .center_wrap, .left, .right { float: left; min-height: 500px; } .center_wrap { width: 100%; }...

    左侧固定,右侧自适应(两种方法任选)

    在这种方法中,我们首先定义一个外部容器,该容器将包含两个子,分别用于左侧和右侧内容。左侧内容通过设置CSS属性`position: absolute;`和指定宽度(如300px),可以轻易地将其固定在容器的左侧。而右侧内容则简单...

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

    - 父容器因为子元素浮动而高度塌陷。 - 不同浏览器对float的渲染结果不一致,导致布局错乱。 - 特别是在IE6/IE7等旧版本浏览器中,float的兼容性问题更加显著。 2. 兼容性问题的具体案例 在文档中提到的情况是,一...

    HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

    当一个元素触发BFC时,它会在自己的区域内进行渲染,不会受到外部的影响。我们可以通过设置`overflow`属性(非`visible`值)来触发BFC。在右侧`div`中,我们将其`overflow`设置为`hidden`,创建了一个BFC。 代码...

    DIV设置浮动后无法撑开外部DIV的解决办法

    如果`.child` 设置了 `float: left` 或 `float: right`,它将会浮动到父元素的左侧或右侧,而`.parent`则不会根据`.child`的高度自适应。这可能导致`.parent`的显示不完整,因为它无法检测到内部浮动元素的真实高度...

    ie6/7/8的 css hack

    3. **万能float闭合(Clear Fix)**:在CSS布局中,浮动元素可能导致其容器高度无法正确计算。为了解决这个问题,可以使用一种名为Clear Fix的方法。这通常涉及在浮动元素的父元素上添加一个类,如`.clearfix`,然后...

    CSS浏览器兼容性学习

    6. 外部wrapper高度:外部包裹div不要设定固定高度,使用`overflow: hidden`可实现高度自适应。 7. 光标样式:`cursor: pointer`适用于所有现代浏览器,而`hand`仅适用于IE。 四、样式兼容技巧 使用!important Hack...

    CSS双列布局实战.doc

    但需要注意的是,由于浮动元素的影响,外层容器的高度可能不会自动扩展以包含所有的内容,这可能导致边框显示不完整。 为了解决这个问题,我们需要清除浮动(clear the float)。一种常见的方法是添加一个具有`...

    2022最新Web前端经典面试试题及答案——CSS篇.docx

    BFC 是 Block Formatting Context 的缩写,指的是页面上一个独立的容器,容器内部的子元素不会影响到外部的元素。BFC 的区域有一个独立的块级渲染区域,该区域有一个套渲染规则来约束盒子的布局,与外部的区域没有...

    css浏览器兼容整理

    - 在某些情况下,尤其是IE浏览器中,可能会遇到1px高度的容器无法正确显示的问题。这通常可以通过增加容器的 `overflow` 属性来解决。 4. **Firefox关于DIV高度无法自适应** - Firefox和其他现代浏览器默认情况...

    IE和FIREFOX下CSS的区别与解决方法第1/2页

    6. **自适应高度**:使用`float`属性可以让子元素自动扩展其父元素的高度,实现自适应效果。 综上所述,虽然IE与Firefox在处理CSS时存在差异,但通过采取适当的解决策略,可以有效地提高网站在不同浏览器中的兼容性...

    浮动的div自适应居中显示的js代码

    标题和描述中提到了关于使用JavaScript实现一个浮动的div元素能够在浏览器窗口变化时仍然保持自适应居中显示的解决方案。通过使用jQuery库来获取外围div元素的宽度,并根据其宽度来动态计算内部浮动div的位置。这个...

    css兼容性详解

    - **外部 wrapper 的高度**:作为外部包裹层的`div`不要固定高度,最好加上`overflow: hidden`以实现高度自适应。 - **光标样式**:使用`cursor: pointer`而不是仅适用于IE的`hand`。 #### 四、针对不同浏览器的CSS...

    css样式兼容不同浏览器的问题

    - **外部包裹`div`的高度自适应**:为了避免高度问题,建议不要给作为外部包装的`div`设定固定高度,并添加`overflow: hidden;`。 - **手形光标兼容**:`cursor: pointer;`适用于大多数现代浏览器,而`hand`仅适用于...

    HTML-bfc初探

    - **计算高度**:BFC可以正确计算自身高度,包括浮动元素的高度,用于自适应布局。 4. **BFC的布局规则**: - BFC内部的块级元素从顶部开始垂直布局。 - 同一BFC内,相邻的块级元素的margin会发生垂直塌陷...

Global site tag (gtag.js) - Google Analytics