clear

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

clear は CSS のプロパティで、要素をその前にある浮動要素の下に移動 (clear) する必要があるかどうかを設定します。clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。

試してみましょう

clear: none;

clear: left;

clear: right;

clear: both;

<section class="default-example" id="default-example"> <div class="example-container"> <div class="floated-left">Left</div> <div class="floated-right">Right</div> <div class="transition-all" id="example-element"> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </div> </div> </section>

.example-container { border: 1px solid #c5c5c5; padding: 0.75em; text-align: left; line-height: normal; } .floated-left { border: solid 10px #ffc129; background-color: rgba(81, 81, 81, 0.6); padding: 1em; float: left; } .floated-right { border: solid 10px #ffc129; background-color: rgba(81, 81, 81, 0.6); padding: 1em; float: right; height: 150px; }

浮動でないブロックに適用された場合は、その要素の境界の辺が、関係するすべての浮動要素のマージンの辺より下まで移動します。浮動でないブロックの上マージンは折り畳まれます。

一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。

解除されることに関連する浮動要素は、その前の浮動要素と同一のブロック整形コンテキスト内の先行する浮動要素です。

メモ: 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その要素の display プロパティの値を flow-root に設定してください。

css

#container { display: flow-root; }

構文

css

/* キーワード値 */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* グローバル値 */ clear: inherit; clear: initial; clear: revert; clear: revert-layer; clear: unset;

値

none: 要素は先行する浮動要素と切り離されず、下に移動しません。
left: 要素は先行する左の浮動要素と切り離され、下に移動します。
right: 要素は先行する右の浮動要素と切り離され、下に移動します。
both: 要素は先行する左右両方の浮動要素と切り離され、下に移動します。
inline-start: 要素は、先行する包含ブロックの先頭側の浮動要素の下に移動することを示すキーワードです。これは左書きでは左側、右書きでは右側の浮動要素です。
inline-end: 要素は、先行する包含ブロックの末尾側の浮動要素の下に移動することを示すキーワードです。これは左書きでは右側、右書きでは左側の浮動要素です。

公式定義

初期値	`none`
適用対象	ブロックレベル要素
継承	なし
計算値	指定通り
アニメーションの種類	離散値

形式定義

clear = 
 inline-start |
 inline-end |
 block-start |
 block-end |
 left |
 right |
 top |
 bottom |
 both-inline |
 both-block |
 both |
 none

例

clear: left

HTML

html

<div class="wrapper"> <p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. </p> <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">This paragraph clears left.</p> </div>

CSS

css

.wrapper { border: 1px solid black; padding: 10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width: 20%; } p { width: 50%; }

clear: right

HTML

html

<div class="wrapper"> <p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. </p> <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">This paragraph clears right.</p> </div>

CSS

css

.wrapper { border: 1px solid black; padding: 10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: right; margin: 0; background-color: pink; width: 20%; } p { width: 50%; }

clear: both

HTML

html

<div class="wrapper"> <p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. </p> <p class="red"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. </p> <p class="both">This paragraph clears both.</p> </div>

CSS

css

.wrapper { border: 1px solid black; padding: 10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: right; margin: 0; background-color: pink; width: 20%; } p { width: 45%; }

仕様書

Specification
Cascading Style Sheets Level 2 # propdef-clear
CSS Logical Properties and Values Level 1 # float-clear

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1970年1月1日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content