CSSのプロパティ「clear」とは？

2024年2月1日CSS

CSSのプロパティである「clear」とは、要素をその前にある浮動要素の下に移動する必要があるかどうかを設定することが出来ます。ちなみにclearは、浮動要素も非浮動要素もどちらも対応出来ます。

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

none
要素は先行する浮動要素と切り離されず、下に移動しません。

left
要素は先行する左の浮動要素と切り離され、下に移動します。

right
要素は先行する右の浮動要素と切り離され、下に移動します。

both
要素は先行する左右両方の浮動要素と切り離され、下に移動します。

inline-start
要素は、先行する包含ブロックの先頭側の浮動要素の下に移動することを示すキーワードです。これは左書きでは左側、右書きでは右側の浮動要素です。

inline-end
要素は、先行する包含ブロックの末尾側の浮動要素の下に移動することを示すキーワードです。これは左書きでは右側、右書きでは左側の浮動要素です。