「CSS入門」clearプロパティ(none、left、right、both)を使うサンプル

2013年11月26日2020年10月23日

説明
CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。
構文
1.clear:none
先行する浮動要素と切り離されず、下に移動しません。

2.clear:left
先行する左の浮動要素と切り離され、下に移動します。
使用例

.left {
   border:2px solid;
   clear: left;
}
<p class="left">left class AAAA</p>

3.clear:right
先行する右の浮動要素と切り離され、下に移動します。
使用例

.right {
   border:2px solid;
   clear: right;
}
<p class="right">right class BBB</p>

4.clear:both
先行する左右両方の浮動要素と切り離され、下に移動します。
使用例

.both {
  border:2px solid;
  clear: both;
}
<p class="both">both class contents</p>

5.clear:inline-start
先行する包含ブロックの始端側の浮動要素の下に移動することを示します。
使用例

.inline-start {
  border:2px solid;
  clear: inline-start;
}
<p class="inline-start">inline-start contents</p>

6.clear:inline-end
先行する包含ブロックの終端側の浮動要素の下に移動することを示します。
使用例

.inline-end {
  border:2px solid;
  clear: inline-end;
}
<p class="inline-end">inline-end contents</p>

Posted by arkgame