clear:フロート(float)の回り込みを解除する
初期値 | none |
適用対象 | ブロックレベル要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
clearプロパティの説明
clear
は、<float>
が指定されて浮動状態となった要素の回り込みを解除します。このプロパティ自体は、浮動状態と非浮動状態どちらの要素にも指定できます。
clearに指定できる値
- none
- 先行する浮動要素のフロートを解除しません。指定どおりに回り込みを行います。
- left
- 先行する浮動要素に左方向のフロートが指定されていた場合は回り込みを解除します。要素は通常のブロックレベルのレイアウトに従い、先行する要素の下に移動します。
- right
- 先行する浮動要素に右方向のフロートが指定されていた場合は回り込みを解除します。要素は通常のブロックレベルのレイアウトに従い、先行する要素の下に移動します。
- both
- 先行する要素が浮動状態であれば左右どちらの方向のフロートも解除します。通常のブロックレベルのレイアウトに従い、先行する要素の下に移動します。
- inline-start
- これが指定された要素は、先行する包含ブロックの先頭側の浮動要素の下に移動します。左書きの場合は左側、右書きの場合は右側の浮動要素を参照します。
- inline-end
- これが指定された要素は、先行する包含ブロックの末尾側の浮動要素の下に移動します。左書きの場合は右側、右書きの場合は左側の浮動要素を参照します。
clearの使い方とサンプル
clear
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* グローバル値 */
clear: inherit;
clear: initial;
clear: revert;
clear: unset;
clearの実例
それでは実際にclear
プロパティの書き方を見ていきましょう。最初の例は、左右にカラムを分けたレイアウトをfloat
を使ってマークアップしようとした時の挙動です。
表示確認
CSS
#column_box {
margin: 1rem 0 0;
padding: 0 1rem 1rem 1rem;
border: 1px Solid #999;
font-size: 1rem;
}
#column_box div {
margin-top: 1rem;
padding: .5rem;
border: 1px Solid #999;
}
#left_column {
float: left;
width: 68%;
}
#right_column {
float: right;
width: 30%;
}
#footer_column {
clear: both;
}
HTML
<div id="column_box">
<div id="header_column">header_column</div>
<div id="left_column">left_column</div>
<div id="right_column">right_column</div>
<div id="footer_column">footer_column</div>
</div>
このように、先行する要素が浮動状態だった場合に、clear
を指定すれば回り込みを解除できます。ただし、単純な構造でこの仕組みを使うと、マージンの折りたたみが発生して期待したレイアウトが崩れてしまいます。
これを防ぐためには、ボックスを入れ子にして包含要素の中で回り込みの解除を行います。親要素の末尾に擬似要素を配置し、そこにclear
を指定します。すると、その下に配置されるフッターブロックは回り込みを解除する必用がないため、マージンは折りたたまれずに期待したレイアウトが表示されます。これはclearfix
と呼ばれる手法で、一種のハック技です。CSSにflex
ボックスやgrid
レイアウトが登場する以前は、頻繁に使用されていました。
表示確認
CSS
#column_box {
margin: 1rem 0 0;
padding: 0 1rem 1rem 1rem;
border: 1px Solid #999;
font-size: 1rem;
}
#column_box div {
margin-top: 1rem;
padding: .5rem;
border: 1px Solid #999;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
#left_column {
float: left;
width: 68%;
}
#right_column {
float: right;
width: 30%;
}
HTML
<div id="column_box">
<div id="header_column">header_column</div>
<div id="clear_column" class="clearfix">
<div id="left_column">left_column</div>
<div id="right_column">right_column</div>
</div>
<div id="footer_column">footer_column</div>
</div>
clearに関連するCSSプロパティ
要素の表示や配置方法 | |
---|---|
bottom | 位置指定で配置された要素の底辺からの距離を指定する |
break-after | ボックスの終了時にページやカラムをどのように区切るかを指定する |
break-before | ボックスの開始前にページやカラムをどのように区切るかを指定する |
break-inside | ボックスの途中でページやカラムをどのように区切るかを指定する |
clear | フロート(float)の回り込みを解除する |
clip | 要素を切り抜いて可視化する範囲を指定する |
box-decoration-break | 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する |
display | 要素の表示形式を指定する |
float | 要素を右または左へ寄せて配置する |
image-orientation | 横向きや逆さまに撮影された写真を正しい向きに回転させる |
image-rendering | 画像を拡大縮小するアルゴリズムを設定する |
left | 位置指定で配置された要素の左辺からの距離を指定する |
object-fit | 画像や動画などの置換要素をボックスに収める方法を指定する |
object-position | ボックスの中に配置されるオブジェクトの位置を指定する |
overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
overflow-wrap | インライン要素に対して溢れる単語の折り返し方法を指定する |
overflow-x | 要素から水平方向にはみ出す内容の表示方法を指定する |
overflow-y | 要素から垂直方向にはみ出す内容の表示方法を指定する |
position | 要素の位置指定の種類を変更する |
right | 位置指定で配置された要素の右辺からの距離を指定する |
vertical-align | インライン要素や表のセルに対して縦方向の揃える位置を指定する |
visibility | 要素の領域を残したまま表示・非表示を切り替える |
z-index | 要素の重なり順序を指定する |