CSS 属性値 clear:right が機能しない理由の詳細

clear プロパティを使用してフロートをクリアすることはよくあることであり、clear プロパティの定義はよく知られているかもしれません。
たとえば、clear:left は左側のフローティング要素をクリアします。サンプルコードは次のとおりです。

コードをコピー

コードは次のとおりです。

コードを表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>アリ族</title>
<スタイルタイプ="text/css">
。初め
{
幅:100ピクセル;
高さ:100px;
border:1px 赤一色;
フロート:左;
}
。2番
{
幅:100ピクセル;
高さ:100px;
border:1px 青一色;
フロート:左;
}
。三番目
{
幅:100ピクセル;
高さ:100px;
border:1px 緑一色;
フロート:左;
クリア:左;
}
</スタイル>
</head>
<本文>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</本文>
</html>

上記のコードから、3 番目の div の clear:left 属性が使用され、要素が折り返されていることがわかります。ただし、clear:right 属性を使用すると機能しない可能性があります。サンプルコードは次のとおりです。

コードをコピー

コードは次のとおりです。

コードを表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>アリ族</title>
<スタイルタイプ="text/css">
。初め
{
幅:100ピクセル;
高さ:100px;
border:1px 赤一色;
フロート:左;
}
。2番
{
幅:100ピクセル;
高さ:100px;
border:1px 青一色;
フロート:左;
クリア:右;
}
。三番目
{
幅:100ピクセル;
高さ:100px;
border:1px 緑一色;
フロート:左;
}
</スタイル>
</head>
<本文>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</本文>
</html>

上記のコードの 2 番目の div には clear:right コードがありますが、その右側にフローティング要素がまだ表示されます。このメインコードは順番に実行されます。2 番目の div が実行されて右側のフロートがクリアされると、3 番目の div がロードされていないため、そのクリア効果は無効になり、3 番目の div は 2 番目の div の後を追うことになります。

<<: JavaScript 高度なカスタム例外

>>: ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法