IE7、FF、OPのフローティングCSSをクリアする最良の方法
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.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="/static/imghw/default1.png" data-src="http://img68.imageshack.us/img68/8708/myIE7、FF、OPのフローティングCSSをクリアする最良の方法9we.gif" class="lazy" 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.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="/static/imghw/default1.png" data-src="http://img68.imageshack.us/img68/8708/myIE7、FF、OPのフローティングCSSをクリアする最良の方法9we.gif" class="lazy" 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;
}
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7612
15
1387
52
88
11
29
136
HTMLで入力ボックスを整列させる方法
Apr 05, 2024 am 10:18 AM
HTML を使用して入力ボックスを配置する方法には、text-align 属性を使用して入力ボックスのテキストを左、右、または中央に配置するように指定する方法があります。 float プロパティを使用して、入力ボックスをページの左側または右側にフロートさせ、相対的な配置に影響を与えます。
フロートをクリアする5つの方法とは何ですか?
Nov 20, 2023 pm 04:27 PM
float をクリアする 5 つの方法は次のとおりです: 1. clear 属性を使用する、2. overflow 属性を使用する、3. 疑似要素 clearfix を使用する、4. flex レイアウトを使用する、5. グリッド レイアウトを使用する。詳細な紹介: 1. フロートをクリアするために最も一般的に使用されるメソッドである、clear 属性を使用します。フローティング要素の後に要素を追加し、それに「clear: Both;」スタイルを追加できます。2. overflow 属性を使用して、親要素を設定します。「overflow: auto;」などを設定します。
フロートをクリアする方法はありますか?
Feb 22, 2024 pm 04:00 PM
フロートをクリアする方法はありますか? 特定のコード例が必要です。Web ページのレイアウトでは、フロートは要素をドキュメント フローから切り離して他の要素と相対的に配置できるようにする一般的なレイアウト方法です。ただし、フローティング レイアウトを使用するときによく発生する問題は、親要素がフローティング要素を正しくラップできず、ページのレイアウトが乱れることです。したがって、親要素が float 型要素を正しくラップできるように、float をクリアする措置を講じる必要があります。 float をクリアする方法は数多くありますが、ここではよく使用されるいくつかの方法と具体的なコード例を紹介します。
レイアウトレイアウトとは何ですか？
Feb 24, 2024 pm 03:03 PM
レイアウトとは、Web ページの要素を特定の規則と構造に従って配置および表示するために Web デザインで採用される組版方法を指します。合理的なレイアウトにより、Web ページはより美しく、整然とし、優れたユーザー エクスペリエンスを実現できます。フロントエンド開発では、従来のテーブル レイアウト、フローティング レイアウト、位置決めレイアウトなど、多くのレイアウト方法から選択できます。しかし、HTML5 や CSS3 の推進により、Flexbox レイアウトやグリッド レイアウトなどの最新のレスポンシブ レイアウト技術が主流になりました。
フロート要素をオーバーフロー プロパティでクリアできない理由
Jan 27, 2024 am 08:08 AM
オーバーフロー属性を使用してフローティングをクリアできない理由を分析するには、特定のコード例が必要です はじめに: Web ページのレイアウトでは、フローティング要素に関する問題がよく発生します。フローティング要素の影響を解決するには、通常、フロートをクリアする方法を使用します。ただし、オーバーフロー属性を使用して浮動小数点をうまくクリアできない場合があるため、この記事ではこの問題を詳しく掘り下げ、具体的なコード例を示します。 1. なぜフロートをクリアする必要があるのですか?フローティング要素とは、float 属性を設定して要素をドキュメント フローから取り出すことを意味します。
CSSにおけるfloatの役割
Apr 28, 2024 pm 01:51 PM
CSS の float プロパティを使用すると、要素がドキュメント フローから抜け出して親要素の端に沿って整列することができ、テキスト イメージ、フローティング メニュー サイドバー、重なり合う要素の作成と位置合わせに使用されます。フローティング要素の属性値には、left (左フロート)、right (右フロート)、none (クリアフロート)、inherit (継承) があります。 float 要素によって親要素がオーバーフローするのを防ぐには、clearfix 手法を使用して空の要素を追加し、float をクリアします。
CSSでフロートをクリアする方法は何ですか
Oct 30, 2023 am 11:57 AM
CSSでfloatをクリアする方法には、clear属性、overflow属性、clearfixクラス、親要素のclearfixクラス、floatをクリアする擬似要素、親要素のoverflow属性、clear属性とBFCの組み合わせなどがあります。詳細な紹介: 1. フロートをクリアする簡単で一般的な方法であるクリア属性を使用します。フローティング要素の後ろに空のブロックレベルの要素を追加し、それにクリア属性を設定すると、以前のフローティング効果をクリアして、フローティング要素をクリアすることができます。以下の要素は通常どおりに配置されます。
オーバーフロークリアフロートが効果がないのはなぜですか?
Oct 17, 2023 pm 02:29 PM
オーバーフロークリアフロートが無効な理由としては、フローティング要素の高さが設定されていない、フローティング要素がクリアされている、クリア要素がフローティング要素の前にある、クリア要素の高さが設定されていない、またはクリア要素が考えられます。浮動要素の後などです。詳細な紹介: 1. フローティング要素の高さが設定されていません。フローティング要素の高さが設定されていない場合、クリアできない可能性があります。フローティング要素の高さはコンテンツによって決定されるため、コンテンツに設定がない場合は、高さ、フローティング要素にも高さはありません; 2. フローティング要素はクリアされますが、フローティング要素がクリアされるときに、オーバーフロー プロパティがクリアされない可能性があります。
