Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > body text

The best way to clear floating css for IE7, FF and OP

PHP中文网
Release： 2018-09-27 16:18:40
Original
2113 people have browsed it

while discussing a margin issue in the css forest group, i accidentally discovered that overflow can also be used to clear floats. hey, this method is not only easy to use, but also supported by ff, op, and ie7. from now on, you can say goodbye to the long compatibility another poor method of clearing floats in ff.

the method is really simple, just add the overflow attribute to the label that needs to be cleared.
css code

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;
}
Copy after login

html code

<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>
Copy after login

where zoom is prepared for 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.m.sbmmt.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/myThe best way to clear floating css for IE7, FF and OP9we.gif" alt="The best way to clear floating css for IE7, FF and OP" /></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>
Copy after login

note: i forgot a very important point. not all overflow attributes have the same effect. for example, the visible attribute can only work on ie. an example can be seen here: 

<?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.m.sbmmt.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/myThe best way to clear floating css for IE7, FF and OP9we.gif" alt="The best way to clear floating css for IE7, FF and OP" /></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>
Copy after login

there is a problem in this case. if there is a height and the content exceeds the height, defining auto or hidden may have some unwanted effects. appear. here is a solution: for ie6 and below, you can directly define the height; for ie7, ff, and op, you can define min-height.

css code:

overflow   
{   
height:auto;   
_height:200px;   
min-height:200px;   
verflow:auto;   
zoom:1;   
_overflow:visible;   
}
Copy after login
Related labels：
clear float
source：php.cn
Previous article：Code for table effect with shadow implemented using css_Experience exchange Next article：CSS filter to achieve text stroke effect (FF and IE6 not supported)
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Even after clearing, the value of my file input remains As you can see in the screenshot. I select a file, keep the popup without refreshing the p...
From 2024-04-06 15:44:52
0
1
384
CommandText property initialization problem I'm trying to materialize data into 2 (later 3) tables simultaneously using a C# console a...
From 2024-04-04 22:43:24
0
1
385
jQuery.remove() and array.splice() issues So I have a page that has a list of items and a shopping list. If you add x number of item...
From 2024-04-04 17:21:35
0
1
347
Revised title: Calculate total based on checkbox selection I'm developing a simple financial tracking application. In the application, there is a tab...
From 2024-04-04 13:45:50
0
1
3465
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template