clearプロパティは、floatプロパティの設定を初期化し、要素の回り込みを防ぐ役割をします。
ブロックボックスが横方向に流れてしまう問題ができます。clear プロパティーはブロックレベル要素にのみ指定します。
none | 回り込みを解除しません。(初期値) |
---|---|
left | 左寄せされたブロック(要素)に対する回り込みを解除します。 |
right | 右寄せされたブロック(要素)に対する回り込みを解除します。 |
both | 左寄せ、または右寄せされた全てのブロック(要素)に対する回り込みを解除します。 |
initial | ブロックレベルボックスを表示します。 |
inherit | 親要素からのプロパティを継承する。 |
下記のレイアウトにて、「MAINの高さ」が「SIDE BARの高さ」よりも低かった場合に、「FOOTER」の内容が「SIDE BAR」の左側で 回り込んで、左寄せされてしまう問題が生じてしまいます。
<style> #footer_a { width:70%; height:100px; background-color:yellow; color:#000; } </style> <body> <div id="header">HEADER</div> <div id="side_bar">SIDE BAR</div> <div id="main">MAIN</div> <div id="footer_a"> FOOTER</div> </body> </html>
スポンサーリンク
この場合、「FOOTER」の直前で段組を解除する必要があります。「clear: left;」を使って左寄せされたブロックの回り込みを解除します。
<style> #footer_a { width:70%; height:100px; background-color:yellow; color:#000; clear: left; } </style> <body> <div id="header">HEADER</div> <div id="side_bar">SIDE BAR</div> <div id="main">MAIN</divl> <div id="footer_a"> FOOTER</div> </body> </html>
フッタ部分が最下部ではなくサイドバーの下に表示されてしまうという問題が発生しまう場合、この回り込みを無くすために、スタイルシートのフッタグループ(footer)に1行「clear:both;」を追記、すべての回り込みが解除(=段組が解除)されます。
横に並んでいる段組の長さ(高さ)が異なる場合に問題が起こります。例えば、left_aよりもleft_bの方が長い場合、Dの下側にEの内容が回り込んでしまいます。
この場合は、「margin-left」を使って左側にマージンを指定します。左側に 15% の幅で段が存在する場合は、次のように、左側に同じ幅(15%)のマージンを加えるスタイルを記述します。
<style> .sector_a { float: left; width: 150px; background-color:yellow; } .sector_b { margin-left: 150px; background-color:blue; } .sector_c { clear: both; background-color:red; } .sector_d { float: left; width: 15%; background-color:green; } .sector_e { margin-left: 15%; background-color:pink; } .sector_f { clear: both; background-color:black; } </style> <body> <div class="sector_a">SECTOR_A</div> <div class="sector_b">SECTOR_B</div> <div class="sector_c">SECTOR_C</div> <div class="sector_d">SECTOR_D</div> <div class="sector_e">SECTOR_E</div> <div class="sector_f">SECTOR_F</div> </body>
スポンサーリンク
スポンサーリンク
Category
BILLION WALLET Copyright©All rights reserved