コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

IE7、FF、OPのフローティングCSSをクリアする最良の方法

PHP中文网
リリース： 2018-09-27 16:18:40
オリジナル
2112 人が閲覧しました

css フォレスト グループでマージンの問題について議論しているときに、フロートをクリアするためにオーバーフローを使用できることを偶然発見しました。この方法は使いやすいだけでなく、ff、op、ie7 でもサポートされています。これで、長い互換性とは別れを告げることができます。 ff のフロートをクリアするもう 1 つの貧弱な方法です。

この方法は非常に簡単で、クリアする必要があるラベルにオーバーフロー属性を追加するだけです。
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>
ログイン後にコピー

ズームの場所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/myIE7、FF、OPのフローティングCSSをクリアする最良の方法9we.gif" alt="IE7、FF、OPのフローティングCSSをクリアする最良の方法" /></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>
ログイン後にコピー

注: 非常に重要な点を忘れていました。すべてのオーバーフロー属性が同じ効果を持つわけではありません。たとえば、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.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/myIE7、FF、OPのフローティングCSSをクリアする最良の方法9we.gif" alt="IE7、FF、OPのフローティングCSSをクリアする最良の方法" /></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 以前の場合は高さを直接定義できますが、ie7、ff、op の場合は min-height を定義できます。

css コード:

overflow   
{   
height:auto;   
_height:200px;   
min-height:200px;   
verflow:auto;   
zoom:1;   
_overflow:visible;   
}
ログイン後にコピー
関連ラベル：
クリアフロート
ソース：php.cn
前の記事：css_Experience 交換を使用して実装されたシャドウ付きのテーブル効果のコード 次の記事：テキスト ストローク効果を実現する CSS フィルター (FF および IE6 はサポートされていません)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
クリア後​​も自分のファイル入力の値が残る スクリーンショットでわかるように。ファイルを選択し、ページを更新せずにポップアップを保持し、再度開くと、ファイル入力は選択したファイルのままです。 <inputid=&quo...
から 2024-04-06 15:44:52
0
1
384
CommandText プロパティの初期化の問題 C# コンソール アプリケーションを使用して、データを 2 つ (後に 3 つ) のテーブルに同時に実体化しようとしています。 「Users」テーブルに名、姓、ユーザー ID を実...
から 2024-04-04 22:43:24
0
1
385
jQuery.remove() および array.splice() の問題 アイテムのリストと買い物リストを含むページがあります。アイテムのリストから x 個のアイテムをショッピング リストに追加する場合は、ショッピング リスト内のアイテムをクリックし、そ...
から 2024-04-04 17:21:35
0
1
347
改訂されたタイトル: チェックボックスの選択に基づいて合計を計算する 私は単純な財務追跡アプリケーションを開発しています。アプリケーションには、すべての経費請求書が記載された表があり、合計金額は表の外側にあります。 JS または AJAX を使用して...
から 2024-04-04 13:45:50
0
1
3465
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート