ホームページ > 記事 > ウェブフロントエンド > 浮きを解消する方法とメリット・デメリットとは？
浮きを解消する方法とメリット・デメリットとは？
- 一个新手オリジナル
- 2017-09-23 10:23:132168ブラウズ
フロートをクリアする理由?
以下の例は、要素にフローティングを適用した場合の効果です
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.box2 {
width: 100px;
height: 40px;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>box2にfloat:left属性を追加した結果は以下の通りです
図のように、box1は高さを設定していないため、box3が自動的にスペースを埋めます。この場合、ページがめちゃくちゃになってしまいます。したがって、この float をクリアする必要があります
以下は float をクリアするいくつかの方法です
(1) クリア: 両方
フローティング要素の下に p タグを追加し、クリア: 両方の属性を設定することによって
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear {
clear: both;
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1">
<p class="box2"></p>
<p class="clear"></p>
</p>
<p class="box3"></p></body></html> 利点: シンプル、コードが少なく、優れたブラウザサポート
短所: 無意味なタグが追加されました
(2) overflow: hidden
フローティング要素の親要素に overflow: hidden 属性を追加してフロートをクリアします
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear {
overflow: hidden;
zoom: 1; /*处理兼容性问题*/
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1 clear">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>長所: シンプルでコードが少なく、優れたブラウザサポート
欠点: 超過したコンテンツは非表示になります
(3) after 疑似クラスを追加します
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear:after {
clear: both;
content: "";
display: block;
visibility: hidden;
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1 clear">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html> 利点: 優れたブラウザサポート
欠点: 大量のコード
3 番目の方法は現在多くのブラウザで使用されているため、 float をクリアするときは、after 疑似クラスを使用するのが最善です
以上が浮きを解消する方法とメリット・デメリットとは？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。