xiaozmn
- 浏览: 358172 次
- 性别:
- 来自: 保定
-
文章分类
- 全部博客 (266)
- ERP (69)
- ERP-SAP-MM (50)
- ERP-SAP-FICO (23)
- ERP-SAP-HR (2)
- ERP-SAP-HU (1)
- ERP-SAP-BASIS (4)
- ERP-SAP-EWM (2)
- div+css (34)
- flex (9)
- 网页设计理论 (17)
- 网页代码理论 (1)
- 网页代码技巧 (12)
- UI设计理论 (6)
- flash (3)
- 界面设计 (14)
- 数码照片处理 (7)
- 影像处理 (1)
- logo设计 (3)
- 测试 (6)
- 习惯性思维 (6)
- 心情日记 (14)
- 印刷 (3)
- seo优化 (5)
- 人力资源eHR管理 (3)
- 项目管理相关链接 (1)
- PPT演示沟通 (5)
- 项目管理 (4)
- TAMM40_Part2.rar (1)
- SAP VIM (1)
- SAP使用公司 (1)
- 会计 (1)
- erp-sap-qm (1)
- WEB前端 (0)
最新评论
-
liomao：
火狐浏览器不通用吧？
收藏本站代码及设为首页代码 -
上善如水：
我刚刚开始写网页，看了不少的写作规范写作规范，可是还是有浏览器 ...
UL-LI 标签结合CSS的运用基础 -
ksmjava：
关于技术人员的前途，目前在国内确实得用"惨淡&quo ...
WEB前端设计师需要的技能 -
AlexChen_China：
Web开放工具是如此的丰富啊...初来乍道很多工具都不知道;
前端开发大众手册(包括工具、网址、经验等) -
xiaoqing20：
不错长见识了
什么是UI
也许你在做网页的时候发现，发一个区块内的元素被应用了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>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
本文来自：赛酷网(www.syku.net) 原文链接：http://www.syku.net/web/pagemake/css/200711/11414.shtml
如图中的城市导航内的城市列表中采用了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>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
本文来自：赛酷网(www.syku.net) 原文链接：http://www.syku.net/web/pagemake/css/200711/11414.shtml
分享到：
发表评论
-
精通 CSS 造型设计元素
2010-01-20 13:35 1301CSS 是现代网页设计的重要基石。Web 标准要求使用 CSS ... -
你必须知道的10个不常用的HTML标签
2009-09-10 21:31 972http://www.qianduan.net/you-hav ... -
wofoo表单模板下载
2009-09-10 21:01 879http://wufoo.com/gallery/ -
加个地址栏图标
2009-08-23 21:56 786<link rel="shortcut ico ... -
解决IE8兼容性问题的便捷方法
2009-08-20 09:19 1248微软告知我们：在目前兼容IE 7 的网站上只需添加一行代码（加 ... -
div垂直居中
2009-08-20 08:08 982position: absolute; width:880 ... -
标准化良构之路
2009-08-10 15:24 840专题:标准化良构之路 标准化走到今天,当CSS被我们充分的接 ... -
使用CSS为图片添加更多趣味的5种方法.
2009-07-17 23:38 11061， 阴影效果. 通过使用带有一些padding之的背景 ... -
Blueprint CSS 框架学习笔记概述
2009-07-17 23:34 1587这个 CSS 框架将 html 标签设定为如下情况： 统一 ... -
CSS框架思维雏形与CSS文件精简
2009-07-17 23:31 915假如在你切完所有图之后,假如你切的网站是娱乐性的网站.(重复性 ... -
CSS BUG顺口溜
2009-07-16 22:23 928CSS BUG顺口溜 一、IE边框若显若无，须注意，定是高度 ... -
用CSS替换传统方法
2009-07-16 18:16 873下面的列表将帮助你用CSS替换传统方法： HTML属性以及相对 ... -
UL-LI 标签结合CSS的运用基础
2009-07-16 13:46 1533LI代码的格式化: A).运用CSS格式化列表符： ul l ... -
css相关工具
2009-07-16 13:45 1036附加 工具 http://www.ziuo.cn/box/c ... -
DIV+CSS 命名规范
2009-07-16 13:44 11541.CSS ID 的命名 外 套： wrap 主导航： m ... -
Css单词英汉对照
2009-07-16 13:44 1019margin:页边的空白, (湖、池等的)边缘, 极限, 利润 ... -
Web标准概念--摘抄《CSS布局实录》
2009-07-16 13:43 1073前言 对于日常的很多事情，我们并没有注意到这背后都有着一个隐藏 ... -
用CSS做一个最简单的导航栏
2009-07-16 13:41 1529导航栏是网页中常用的模块，有很多方法可以实现，下面是用css实 ... -
Iframe高度自适应
2009-07-16 13:41 882<iframe width="190" ... -
css背景渐变的技巧与方法
2009-07-16 13:40 2533用css实现网页背景渐变的代码如下： 一、从上往下渐变 ...
相关推荐
这种方法可以解决高度塌陷问题，并且可以让高度自适应。但是这种方法会对溢出的内容进行隐藏裁剪不显示，适合没溢出时使用。 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`当作最小值。为确保在所有浏览器...