ホームページ > 記事 > ウェブフロントエンド > CSSを使ってfloatをクリアする方法を詳しく解説
CSSを使ってfloatをクリアする方法を詳しく解説
- 高洛峰オリジナル
- 2017-03-09 17:46:061456ブラウズ
この記事では、CSS を使用してフロートをクリアする詳細な方法を主に紹介します。フロートを単にクリアするだけで常に解決できるわけではないことに注意してください。記事の最後に記載されているフロートを閉じる解決策も試す価値があります。
クリアフローティングメソッドを参照できます
方法1:クリア属性の空要素を使用する
または
を使用することもできます。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: rightright;
}
.clear {
clear: both;
}rrree
利点: シンプル、コードが少ない、ブラウザとの互換性が良い。
短所: 大量の非セマンティックな HTML 要素を追加する必要があり、コードは十分にエレガントではなく、後で保守するのは簡単ではありません。
方法2: CSSのオーバーフロー属性を使用する
フローティング要素のコンテナにoverflow:hidden;またはoverflow:auto;を追加するなど、IE6でhasLayoutをトリガーする必要があります。親要素のコンテナの幅と高さを設定するか、zoom:1 を設定します。オーバーフロー属性を追加した後、フローティング要素はコンテナー層に戻り、コンテナーの高さが上がり、フローティング要素をクリーンアップする効果が得られます。
<p class="news"> <img src="news-pic.jpg" / alt="CSSを使ってfloatをクリアする方法を詳しく解説" > <p>some text</p> <p class="clear"></p> </p>
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}
.news img {
float: left;
}
.news p {
float: rightright;
}
方法3:フローティング要素のコンテナにフロートを追加する
フローティング要素のコンテナにフロート属性を追加して内部のフロートをクリアしますが、これにより全体的にフローティングになり、レイアウトに影響を与えます。推奨されません。
方法4:隣接要素処理を使用する
何もせず、フローティング要素の後ろの要素にclear属性を追加します。
<p class="news"> <img src="news-pic.jpg" / alt="CSSを使ってfloatをクリアする方法を詳しく解説" > <p>some text</p> </p>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: rightright;
}
.content{
clear:both;
}
ここの p.content にはコンテンツがあることに注意してください。
方法 5: CSS :after 疑似要素を使用する
:after 疑似要素 (これは疑似クラスではなく、要素の後に最も近い要素を表す疑似要素であることに注意してください) と IEhack を組み合わせます、現在の主流と完全に互換性があります。主要なブラウザの場合、ここでの IEhack は hasLayout をトリガーすることを指します。
フローティング要素のコンテナーに clearfix クラスを追加し、このクラスに :after 疑似要素を追加して、要素の最後に非表示のブロック要素 (Block 要素) を追加してフロートをクリーンアップします。
<p class="news"> <img src="news-pic.jpg" / alt="CSSを使ってfloatをクリアする方法を詳しく解説" > <p>some text</p> <p class="content">***</p> </p>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: rightright;
}
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
CSS疑似要素でコンテナの内部要素の末尾に非表示のスペース「020」またはドット「.」を追加し、floatをクリアするclear属性を付与します。 IE6 および IE7 ブラウザの場合、haslayout をトリガーするには、zoom:1 を clearfix クラスに追加する必要があることに注意してください。
概要
上記の例を通して、float をクリアする方法が 2 つのカテゴリに分類できることが簡単にわかります:
1 つは、clear 属性を使用する方法です。これには、clear: Both 属性を使用して空の p を追加することも含まれます。実際、:after 疑似要素を使用する方法は、要素の最後に内容がドットで、clear:both 属性を持つ要素を追加することによっても実現されます。
2つ目は、フローティング要素の親要素のBFC(Block Formatting Contexts、ブロックレベルのフォーマットコンテキスト)をトリガーして、親要素にフローティング要素を含めることができるようにすることです。
Web ページのメイン レイアウトで :after 疑似要素メソッドを使用し、フロートをクリーンアップする主な方法として使用します。ul などの小さなモジュールで overflow:hidden; を使用します (隠れたオーバーフロー要素の問題に注意してください) ); フローティング要素の場合は、特別な処理を行わずに内部フロートを自動的にクリアできます。ボディ内の隣接する要素を使用して前のフロートをクリアします。
最後に、比較的完璧な :after 疑似要素メソッドを使用してフロートをクリーンアップし、ドキュメントの構造をより明確にすることができます。
追記：フロートをクリアするか、フロートを閉じるか？
Web ページのレイアウトでフロートを使用すると、望む効果をより簡単に実現できますが、フロートにはいくつかの隠れた危険が残されていることがよくあります。このとき、通常はフロートをクリアするために 1 つのことを行いますが、フロートをクリアすると隠れた危険が残ることがよくあります。次のコード:
<p class="news clearfix"> <img src="news-pic.jpg" / alt="CSSを使ってfloatをクリアする方法を詳しく解説" > <p>some text</p> </p>
効果の図は次のとおりです: 
フロートをクリアするために足を動かしますが、メインの高さがサブ要素の高さに適応できないため、崩壊が発生します（矢印の方向）。
以下はクローズドフロートを紹介します。名前が示すように、フローティング要素を閉じてフローティングの影響をクリアします。現在、フロートをクリアするために最も一般的に使用されている方法は、clearfix です。具体的には、足元にclear:bothを追加する代わりに、CSSの次の行を挿入します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type='text/css'>
#main{
border: 1px solid #000;
}
#left{
float: left;
width: 100px;
height: 100px;
background-color: #f00;
}
#right{
float: left;
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<p id="main">
<p id="left"></p>
<p id="right"></p>
</p>
</body>
</html>以上がCSSを使ってfloatをクリアする方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。