【CSS】回り込み(段組)を解除する「clear」プロパティ

clearプロパティは、floatプロパティの設定を初期化し、要素の回り込みを防ぐ役割をします。

ブロックボックスが横方向に流れてしまう問題ができます。clear プロパティーはブロックレベル要素にのみ指定します。

<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>

HEADER

MAIN

FOOTER

この場合、「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>

HEADER

MAIN

FOOTER

clear:both;

フッタ部分が最下部ではなくサイドバーの下に表示されてしまうという問題が発生しまう場合、この回り込みを無くすために、スタイルシートのフッタグループ（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>

SECTOR_A

SECTOR_B

SECTOR_C

SECTOR_D

SECTOR_E

SECTOR_F