ホームページ > 記事 > ウェブフロントエンド > CSS を使用してフローティングの Clearfix と Clear をクリアする方法についての簡単な説明
CSS を使用してフローティングの Clearfix と Clear をクリアする方法についての簡単な説明
- 高洛峰オリジナル
- 2017-03-17 16:33:511988ブラウズ
以下のエディターでは、CSS クリアフロート (clearfix および clear) の使用について簡単に説明します。編集者はこれがとても良いと思ったので、参考として共有します。エディターと一緒に見に来てください
この記事では、cssを理解し始めたばかりの子供向けに、htmlでのclearfixとclearの使い方を主に説明します。ここではclearfixとclearのスタイルについては書きません。
これら 2 つのクラスの使用法について説明しましょう。まず、例を見てみましょう:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>如何在html中使用clearfix和clear</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
</style>
</head>
<body>
<p class="demo">
<p class="fl item1"></p>
<p class="fl item2"></p>
</p>
</body>
</html>float を使用すると、多くの未知の問題が発生することは誰もが知っています。上記の例を通じて、class="demo の高さを見つけることができます。 " 内部の p によって引き伸ばされません。これは、内部の p が浮いて文書から離れるためです。デモ自体には高さがないため、灰色の背景は見えません。もちろん、デモに高さを与えるだけですが、これはこの記事の目的から逸脱します (外側の p の高さを内部のコンテンツによって決定したい場合があります)。
フローティングによって引き起こされる問題なので、フローティングをクリアするだけです。専門家は、overflow:hidden など、フローティングをクリアするための多くの方法を持っていると思います。以下にclearfixとclearを使ってfloatをクリアする方法を紹介します。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>如何在html中使用clearfix和clear</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
</style>
</head>
<body>
<h2>用 clear 清除浮动</h2>
<p class="demo">
<p class="fl item1"></p>
<p class="fl item2"></p>
<p class="clear"></p>
</p>
<h2>用 clearfix 清除浮动</h2>
<p class="clearfix demo">
<p class="fl item1"></p>
<p class="fl item2"></p>
</p>
</body>
</html>clearfixは主にフローティングレイヤーの親レイヤーで使用され、clearは主にフローティングレイヤーとフローティングレイヤーの間で使用され、フローティングレイヤーと同じレベルにあることがわかりました。親レイヤーの高さを拡張したい場合は、クリアを最後に入れるだけです。
これら 2 つの方法のどちらが優れているかを言うのは難しいですが、特定のニーズを詳細に処理する必要があるとしか言えません。
関連記事:
CSSのclearfixクリアフローティングメソッドについて
最も包括的なcssのclearfixクリアフローティングメソッド
以上がCSS を使用してフローティングの Clearfix と Clear をクリアする方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。