ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS について - エッセイを読む 3 (Clear Floats)_html/css_WEB-ITnose
CSS について - エッセイを読む 3 (Clear Floats)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:58:181200ブラウズ
フローティングは主に float 属性によって引き起こされるページのずれ現象を解決するだけでなく、親要素の背景を引き起こす子要素のフローティングの問題も解決できます。子要素の高さに適応できないという問題があります。 CSSスタイルでは、クリア属性のboth、left、rightの3つの属性値は主に、フローティングによる左右のフローティング効果をクリアするために使用されます。
1. フローティング現象の例
ここでは、float_box (背景色は #aff) が 2 つの div を含み、1 つはフローティングのままであると仮定します。左)、もう 1 つは float:right です。 float_box の外側にフローティング属性を持たない別の div (no_float) を追加します。そのため、コードと期待される効果と実際の効果は次のとおりです。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 }10 .float_left{11 float:left;12 width: 200px;13 height: 100px;14 border: 2px solid #f00;15 }16 .float_right{17 float:right;18 width: 200px;19 height: 100px;20 border: 2px solid #00f;21 }22 .no_float{23 color: #fff;24 background-color: #aaa;25 }26 </style>27 </head>28 <body>29 <div class="float_box">30 <div class="float_left">左浮动元素</div>31 <div class="float_right">右浮动元素</div>32 </div>33 <div class="no_float">测试位置</div>34 35 </body>36 </html>View Code
A. 実際の効果
図1のレンダリング
2.浮き上がりを解消する方法
1. br要素のclear属性を利用する
brタグ属性内のclear属性は left 、right と all の 3 つの属性値を使用してフロートをクリアできます。ただし、この方法では追加の br タグを導入する必要があり、HTML の元の構造が破壊されます。コードは次のとおりです。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/10 /*overflow: hidden;*/11 }12 .float_left{13 float:left;14 width: 200px;15 height: 100px;16 border: 2px solid #f00;17 }18 .float_right{19 float:right;20 width: 200px;21 height: 100px;22 border: 2px solid #00f;23 }24 .no_float{25 color: #fff;26 background-color: #aaa;27 /*clear: both;*/28 }29 </style>30 </head>31 <body>32 <div class="float_box">33 <div class="float_left">左浮动元素</div>34 <div class="float_right">右浮动元素</div>35 <br clear="all">36 </div>37 <div class="no_float">测试位置</div>38 </body>39 </html>View Code 効果を図 1(a) に示します。
2. CSS スタイルで Clear 属性を使用します
a. br タグを導入しますが、それに CSS の変更を追加します。コードは次のとおりです。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/10 /*overflow: hidden;*/11 }12 .float_left{13 float:left;14 width: 200px;15 height: 100px;16 border: 2px solid #f00;17 }18 .float_right{19 float:right;20 width: 200px;21 height: 100px;22 border: 2px solid #00f;23 }24 .no_float{25 color: #fff;26 background-color: #aaa;27 /*clear: both;*/28 }29 .clear_float{30 clear: both;31 }32 </style>33 </head>34 <body>35 <div class="float_box">36 <div class="float_left">左浮动元素</div>37 <div class="float_right">右浮动元素</div>38 <br class="clear_float">39 </div>40 <div class="no_float">测试位置</div>41 </body>42 </html>View Code その効果を図 1(a) に示します。
b. 冗長な HTML 要素の導入を避けるために、.clear_float{clear:both;} を要素に追加します。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/10 /*overflow: hidden;*/11 }12 .float_left{13 float:left;14 width: 200px;15 height: 100px;16 border: 2px solid #f00;17 }18 .float_right{19 float:right;20 width: 200px;21 height: 100px;22 border: 2px solid #00f;23 }24 .no_float{25 color: #fff;26 background-color: #aaa;27 /*clear: both;*/28 }29 .clear_float{30 clear: both;31 }32 </style>33 </head>34 <body>35 <div class="float_box">36 <div class="float_left">左浮动元素</div>37 <div class="float_right">右浮动元素</div>38 </div>39 <div class="no_float clear_float">测试位置</div>40 </body>41 </html>View Code 効果は次のとおりです。
上の図からわかるように、このメソッドは float エラーをクリアしますが、float 要素の親要素の高さが float の高さに適応しません。要素 (背景には色がありません)。
3. CSS
の overflow 属性を使用して、float 要素の親要素に CSS 属性 overflow:hidden を追加します。これにより、float をクリアして高さを調整することもできます。ただし、この属性は div のオーバーフロー部分を非表示にするため、欠点があります。コードは次のとおりです。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 overflow: hidden;10 }11 .float_left{12 float:left;13 width: 200px;14 height: 100px;15 border: 2px solid #f00;16 }17 .float_right{18 float:right;19 width: 200px;20 height: 100px;21 border: 2px solid #00f;22 }23 .no_float{24 color: #fff;25 background-color: #aaa;26 }27 </style>28 </head>29 <body>30 <div class="float_box">31 <div class="float_left">左浮动元素</div>32 <div class="float_right">右浮动元素</div>33 </div>34 <div class="no_float">测试位置</div>35 </body>36 </html>View Code 結果を図 1(a) に示します。
注: overflow:visible のフロートのクリアは、IE ブラウザでのみ有効です。Overflow:auto はフロートをクリアし、複数のレベルのネストを持ち、クリック イベントに影響します。
4. css
の display:table 属性を使用して、float 要素の親要素に css 属性 display:table を追加します。フロートをクリアして高さを調整することもできます。しかし、それは予期せぬ結果を引き起こす可能性があります。コードは次のとおりです。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 display:table;10 }11 .float_left{12 float:left;13 width: 200px;14 height: 100px;15 border: 2px solid #f00;16 }17 .float_right{18 float:right;19 width: 200px;20 height: 100px;21 border: 2px solid #00f;22 }23 .no_float{24 color: #fff;25 background-color: #aaa;26 }27 </style>28 </head>29 <body>30 <div class="float_box">31 <div class="float_left">左浮动元素</div>32 <div class="float_right">右浮动元素</div>33 </div>34 <div class="no_float">测试位置</div>35 </body>36 </html>View Code 効果は次のとおりです。
5. CSS 擬似オブジェクト::after
を使用します。フローティング条件の 1 つをクリアするには まず、フローティング要素の後にある必要があるため、::before の代わりに ::after のみを使用できます (IE ブラウザの場合、9 以降でサポートされている必要があります)。 コードは次のとおりです。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 }10 .float_left{11 float:left;12 width: 200px;13 height: 100px;14 border: 2px solid #f00;15 }16 .float_right{17 float:right;18 width: 200px;19 height: 100px;20 border: 2px solid #00f;21 }22 .no_float{23 color: #fff;24 background-color: #aaa;25 /*clear: both;*/26 }27 .float_box::after{28 clear: both;29 display: block;30 content: "";31 }32 </style>33 </head>34 <body>35 <div class="float_box">36 <div class="float_left">左浮动元素</div>37 <div class="float_right">右浮动元素</div>38 </div>39 <div class="no_float">测试位置</div>40 </body>41 </html>View Code その効果は図 1(a) に示すとおりです。