css对于IE7、FF、OP清除浮动的最优方法
在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。
方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。
css代码
ul {
list-style: none;
height: auto;
margin: 0;
p adding: 0;
background-color: #436973;
}
li {
float: left;
width: 80px;
height: 80px;
background-color: #83B1DF;
}
.demo {
clear: both;
border: 1px solid #FF00FF;
margin-bottom: 5px;
}
.overflow {
overflow: auto;
zoom: 1;
background-color: #43FF73;
}
ul {
list-style: none;
height: auto;
margin: 0;
padding: 0;
background-color: #436973;
}
li {
float: left;
width: 80px;
height: 80px;
background-color: #83B1DF;
}
.demo {
clear: both;
border: 1px solid #FF00FF;
margin-bottom: 5px;
}
.overflow {
overflow: auto;
zoom: 1;
background-color: #43FF73;
}HTML代码
<div class="demo"> <ul class="overflow"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="demo"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
其中zoom是为了IE6准备的。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Ghost" />
<meta name="Copyright" content="CSSForest" />
<meta name="Description" content="CSSɭ" />
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" />
<title>Overflow hack Demo|www.CSSForest.org</title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script>
<style type="text/css">
/*<![CDATA[*/
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}
ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}
li{float:left;width:80px;height:80px;background-color:#83B1DF;}
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}
.overflow{overflow:auto;zoom:1;background-color:#43FF73;}
/*]]>*/
</style>
</head>
<body>
<p></p>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div>
<div>
<div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>
<div>
<p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p>
<p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p>
<p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p>
<p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>
<strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div>
</div>
</div>
</body>
</html>注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里 ：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Ghost" />
<meta name="Copyright" content="CSSForest" />
<meta name="Description" content="CSSɭ" />
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" />
<title>Overflow hack Demo|www.CSSForest.org</title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script>
<style type="text/css">
/*<![CDATA[*/
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}
ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}
li{float:left;height:80px;margin-right:2px;padding:0 10px;background-color:#83B1DF;line-height:80px;}
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}
.overflow{overflow:auto;zoom:1;background-color:#43FF73;}
.overflow1{overflow:hidden;zoom:1;background-color:#43FF73;}
.overflow2{overflow:visible;zoom:1;background-color:#43FF73;}
/*]]>*/
</style>
</head>
<body>
<p>overflow的visible属性只对IE起作用，auto/hidden可对FF、OP起作用。</p>
<div>
<ul>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
</ul>
</div>
<div>
<ul>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
</ul>
</div>
<div>
<ul>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
</ul>
</div>
<div>
<ul>
<li>no overflow</li>
<li>no overflow</li>
<li>no overflow</li>
<li>no overflow</li>
<li>no overflow</li>
<li>no overflow</li>
</ul>
</div>
<div>
<div>
<div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>
<div>
<p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p>
<p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p>
<p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p>
<p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>
<strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div>
</div>
</div>
</body>
</html>这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。
css代码：
overflow
{
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
html怎么对齐输入框
Apr 05, 2024 am 10:18 AM
使用 HTML 对齐输入框的方法有：使用 text-align 属性指定 left、right 或 center 来对齐输入框文本。使用 float 属性将输入框浮动到页面左侧或右侧，以影响其相对对齐方式。
清除浮动的5种方式有哪些
Nov 20, 2023 pm 04:27 PM
清除浮动的5种方式分别是：1、使用clear属性；2、使用overflow属性；3、使用伪元素clearfix；4、使用flex布局；5、使用grid布局。详细介绍：1、使用clear属性，这是最常用的清除浮动的方法，可以在浮动元素后面添加一个元素，并为其添加“clear: both;”样式；2、使用overflow属性，可以为父元素设置”overflow: auto;“等等。
什么是layout布局？
Feb 24, 2024 pm 03:03 PM
layout布局是指在网页设计中，为了使网页元素按照一定的规则和结构进行排列和展示而采取的一种排版方式。通过合理的布局，可以使网页更加美观、整齐，并且达到良好的用户体验。在前端开发中，有许多种布局方式可以选择，比如传统的table布局、浮动布局、定位布局等。但是，随着HTML5和CSS3的推广，现代的响应式布局技术，如Flexbox布局和Grid布局，成为了
清除浮动有什么方法
Feb 22, 2024 pm 04:00 PM
清除浮动有什么方法，需要具体代码示例在网页布局中，浮动是一种常用的布局方法，可以让元素脱离文档流，并相对其他元素进行定位。然而，使用浮动布局时常常会遇到一个问题，就是父元素无法正确地包裹浮动元素，导致页面产生布局错乱的情况。所以，我们需要采取措施来清除浮动，使得父元素能够正确地包裹浮动元素。清除浮动的方法有多种，下面将介绍常用的几种方法，并给出具体的代码示例
为什么浮动元素不能被overflow属性清除
Jan 27, 2024 am 08:08 AM
解析为什么使用overflow属性无法清除浮动，需要具体代码示例引言：在网页布局中，经常会遇到浮动元素的问题。为了解决浮动元素所带来的影响，我们通常会使用一种清除浮动的方法。然而，有时候我们会发现，使用overflow属性无法很好地清除浮动，本文将深入探讨这个问题并提供具体的代码示例。一、为什么需要清除浮动？浮动元素是指通过设置float属性使元素脱离文档流
css中float的作用
Apr 28, 2024 pm 01:51 PM
CSS 中 float 属性允许元素脱离文档流并沿其父元素边缘排列，用于创建并排列、对齐文本图像、浮动菜单边栏和重叠元素。浮动元素的属性值包括 left（左浮动）、right（右浮动）、none（清除浮动）和 inherit（继承）。为防止浮动元素导致父元素溢出，可以使用 clearfix 技术添加一个空元素并清除浮动。
css清除浮动的方式有哪些
Oct 30, 2023 am 11:57 AM
css清除浮动的方式有使用clear属性、overflow属性、clearfix类、父元素的clearfix类、伪元素清除浮动、父元素的overflow属性以及clear属性和BFC相结合等。详细介绍：1、使用clear属性，一种简单而常用的清除浮动的方法，通过在浮动元素的后面添加一个空的块级元素，并为其设置clear属性，可以清除前面的浮动影响，使其下方的元素正常布局等等。
为什么overflow清除浮动无效
Oct 17, 2023 pm 02:29 PM
overflow清除浮动无效的原因可能是浮动元素未设置高度、浮动元素被清除、清除元素在浮动元素之前、清楚元素未设置高度或清楚元素在浮动元素之后等。详细介绍：1、浮动元素未设置高度，当浮动元素没有设置高度时，它可能无法被清除，浮动元素的高度由其内容决定，因此如果内容没有高度，那么浮动元素也没有高度；2、浮动元素被清除，当浮动元素被清除时，overflow属性可能无法清除等等。
