【css】フローティング(clearfixとclear)をクリアする方法
15803 ワード
本文は主にhtmlの中でclearfixとclearを使う方法を説明して、あれらのちょうどcssを理解し始めた子供靴に対して.clearfixとclearのスタイルについてはここでは書きません.具体的なスタイルはここをクリックです.
次に、この2つのclassの使い方についてお話しします.まず、例を見てみましょう.
フローティングを使用すると多くの未知の問題が発生することはよく知られていますが、上記の例ではclass=「demo」の高さが内側のdivによって支えられていないことがわかります.これは、内側のdivがフローティングを起こしてドキュメントから離れたためです.demo自体に高さがないため、灰色の背景が見えません.もちろんdemoに高さを1つあげればいいのですが、これは本稿の目的から離れています(外層divの高さは中の内容で決まることを望んでいます).
フローティングの問題である以上、フローティングをクリアすればいいので、overflow:hiddenのようなフローティングをクリアする方法がたくさんあると信じています.次に、clearfixとclearを使用してフローティングをクリアする方法について説明します.
clearfixは主にフローティング層の親層に用いられ,clearは主にフローティング層とフローティング層の間に用いられ,フローティング層と同じレベルであり,親層の高さを広げるにはclearを最後に置くことが分かった.
この2つの方法のどちらが良いか説明するのは難しいが、具体的な需要が具体的に対応しているとしか言いようがない.
clearfixのスタイルはなぜフローティングをクリアするのかと聞かれるかもしれません.これらのスタイルには何の意味がありますか?これは子供靴たちがcssの偽類に対して一定の理解が必要で、具体的な内容は『おしゃべりCSSのclearfixについて——フローティングをクリアする』をクリックしてください.
次に、この2つのclassの使い方についてお話しします.まず、例を見てみましょう.
<!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>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
</html>フローティングを使用すると多くの未知の問題が発生することはよく知られていますが、上記の例ではclass=「demo」の高さが内側のdivによって支えられていないことがわかります.これは、内側のdivがフローティングを起こしてドキュメントから離れたためです.demo自体に高さがないため、灰色の背景が見えません.もちろんdemoに高さを1つあげればいいのですが、これは本稿の目的から離れています(外層divの高さは中の内容で決まることを望んでいます).
フローティングの問題である以上、フローティングをクリアすればいいので、overflow:hiddenのようなフローティングをクリアする方法がたくさんあると信じています.次に、clearfixとclearを使用してフローティングをクリアする方法について説明します.
<!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>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
<div class="clear"></div>
</div>
<h2> clearfix </h2>
<div class="clearfix demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
</html>clearfixは主にフローティング層の親層に用いられ,clearは主にフローティング層とフローティング層の間に用いられ,フローティング層と同じレベルであり,親層の高さを広げるにはclearを最後に置くことが分かった.
この2つの方法のどちらが良いか説明するのは難しいが、具体的な需要が具体的に対応しているとしか言いようがない.
clearfixのスタイルはなぜフローティングをクリアするのかと聞かれるかもしれません.これらのスタイルには何の意味がありますか?これは子供靴たちがcssの偽類に対して一定の理解が必要で、具体的な内容は『おしゃべりCSSのclearfixについて——フローティングをクリアする』をクリックしてください.