http://www.aa25.cn/content.asp?id=373
也许你在做网页的时候发现，发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。
如图中的城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：
怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上如下代码即可
overflow:auto; zoom:1;
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float浮动之后的问题</title>
<style>
* { padding:0; margin:0;}
body { font-size:12px; line-height:150%;}
ul { list-style:none;}
.container { width:700px; margin:0 auto;}
.header, .footer { height:60px; background:#99CC66; margin-bottom:6px; font-size:18px; font
-weight:bold;}
.main {}
.left { float:left; width:200px;}
.sidepanel { border:1px solid #CC6600; margin-bottom:8px;}
.sidepanel h2 { font-size:12px; background:#CC6600; height:24px; line-height:24px; text-
indent:20px; color:#fff;}
.city { padding:6px 0px; overflow:auto; zoom:1;}
.city li { float:left; width:35px; text-align:center;}
.right { margin-left:200px; background:#CCCC66; height:240px;}
.hotinfo {padding:6px;}
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="main">
<div class="left">
<div class="sidepanel">
<h2>城市导航</h2>
<ul class="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>南京</li>
<li>广州</li>
<li>重庆</li>
<li>济南</li>
<li>杭州</li>
<li>郑州</li>
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>南京</li>
<li>广州</li>
<li>重庆</li>
<li>济南</li>
<li>杭州</li>
<li>郑州</li>
</ul>
</div>
<div class="sidepanel">
<h2>热门文章</h2>
<ul class="hotinfo">
<li>本月20日起入境日本须留指纹</li>
<li>本月20日起入境日本须留指纹</li>
<li>本月20日起入境日本须留<font color="#43FF73">指纹</font></li>
<li>本月20日起入境日本须留指纹</li>
<li>本月20日起入境日本须留指纹</li>
<li>本月20日起入境日本须留指纹</li>
<li>本月20日起入境日本须留指纹</li>
<li>本月20日起入境日本须留指纹</li>
<li>本月20日起入境日本须留指纹</li>
</ul>
</div>
</div>
<div class="right">右侧内容</div>
</div>
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
<div class="footer">footer</div>
</div>
</body>
</html>
分享到：
相关推荐
这种方法可以解决高度塌陷问题，并且可以让高度自适应。但是这种方法会对溢出的内容进行隐藏裁剪不显示，适合没溢出时使用。 3. 给最后一个浮动元素的后面添加一个空标签，并声明 clear：both； 我们可以给最后一个...
为了解决这个问题，引入了清除浮动（Clear Float）的概念。 清除浮动主要有以下几种方法： 1. 给父元素设置固定高度：这种方法简单直接，但适用于高度固定的布局，对于高度自适应的页面则不适用。 2. 使用`overflow...
在CSS布局中，浮动元素（如使用`float:left`或`float:right`）常常会导致父元素高度塌陷，即父元素无法自动扩展以包裹其内部的浮动子元素。为了解决这个问题，我们可以利用`zoom`属性（在IE浏览器中）和`overflow:...
要解决不能随内部图片高度变化而自适应高度的问题，有几个方法可以尝试： 1. 使用overflow属性： 给元素添加overflow:auto样式属性，可以让根据内部内容自动调整高度。这种方法的优点是简单易行，但需要注意的是，...
可以通过设置`clearfix`类或者使用`overflow:hidden`来解决这个问题。 - 当内联元素与浮动元素相邻时，由于内联元素的特性，可能会导致布局混乱，因此通常建议将浮动属性应用于块级元素。 - 清除浮动（clear）是与...
这种布局方式能够让页面中的元素根据浏览器窗口大小自适应地排列，形成一种类似瀑布的效果，即每一列的高度会随着内容的不同而变化，而相邻的列会在某一水平线上对齐。在本教程中，我们将深入探讨如何使用jQuery实现...
在网页设计中，自适应宽度的标签导航是一种重要的布局技术，它允许导航栏根据浏览器窗口的大小自动调整其宽度，从而提供优秀的用户体验，特别是在不同设备和屏幕尺寸上。这种技术通常与响应式网页设计（Responsive ...
前面已经介绍过单列定宽...而float和overflow配合可实现两列自适应效果。使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:
5. **父元素高度塌陷**：由于浮动元素脱离了文档流，可能导致其父元素高度不足，出现“高度塌陷”问题。解决方法包括使用`clearfix`类、设置`overflow:hidden`或使用Flexbox或Grid布局。 6. **浮动与布局模式**：...
1. 父元素高度塌陷：当一个父元素内的所有子元素都浮动后，父元素可能会失去高度，导致背景色或边框无法完全包裹子元素。解决办法是使用clearfix类或者设置`overflow:hidden`。 2. 影响后续元素：浮动元素会影响其...
- IE5/Mac浏览器对未指定宽度的浮动元素处理存在兼容性问题，需要额外的CSS hack来解决。 5. **与其他定位方式的区别** - 相对于绝对定位，浮动元素仍然参与文档流，只是脱离了常规的布局模式。 - 绝对定位的...
对于自适应高度，可以使用`overflow: auto;`或者`display: table-cell;`等技巧。 9. **隐藏内容问题（IE捉迷藏）** 当内容在某些情况下被隐藏时，可以尝试调整line-height属性，或者为元素设置固定高度和宽度。...
在文中，为了在IE6中解决伪换行符div的问题，使用了_clear:none的CSS hack，这表示在IE6中清除浮动的指令不起作用，从而达到解决父容器边框不显示的问题。但这种方法可能会增加维护的复杂性，并不是推荐的做法，仅在...
- **浮动（Float）**：虽然现代布局方法倾向于使用Flexbox或Grid，但在某些简单场景下，浮动也可以帮助实现自适应导航菜单，尤其是当需要元素沿一侧对齐时。 - **Overflow** 和 **Display属性**：通过调整这些属性...
- IE6下，高度小于10px的元素会被显示为10px，通过添加`overflow:hidden`可解决这个问题。 9. **图片与`div`高度问题** - 在IE6中，当图片大小与`div`相同时，`div`高度会增加，此时添加`overflow:hidden`可以...
然而，需要注意的是，单纯的浮动布局并不会保证两列高度一致，因为高度的自适应需要额外的CSS逻辑。为了保证两列高度一致，开发者通常使用JavaScript来动态地调整较短的列，使其高度与较长的列相匹配。但在本例中，...
- 当需要让包含浮动元素的容器自适应高度时，可以在容器上添加`overflow:hidden;`或`zoom:1;`，这会触发IE的私有属性“Layout”，解决高度自适应问题。 综上所述，处理CSS兼容性问题需要对各种浏览器的行为特性有...
float 的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向 overflow（溢出），避免了水平滚动条的出现。 第四，选择加载 CSS 是网页自适应设计的核心，它的意思就是，...
`可以解决这个问题，如`#box{ float:left; width:100px; margin:0 0 0 100px; display:inline;}`。 4. **IE与宽度和高度的问题**： IE不支持`min-`前缀，但会将`width`和`height`当作最小值。为确保在所有浏览器...