「CSS入門」clearプロパティ(none、left、right、both)を使うサンプル
説明
CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。
構文
1.clear:none
先行する浮動要素と切り離されず、下に移動しません。
2.clear:left
先行する左の浮動要素と切り離され、下に移動します。
使用例
.left {
border:2px solid;
clear: left;
}
<p class="left">left class AAAA</p>
.left {
border:2px solid;
clear: left;
}
<p class="left">left class AAAA</p>
.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>
.right {
border:2px solid;
clear: right;
}
<p class="right">right class BBB</p>
.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>
.both {
border:2px solid;
clear: both;
}
<p class="both">both class contents</p>
.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>
.inline-start {
border:2px solid;
clear: inline-start;
}
<p class="inline-start">inline-start contents</p>
.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>
.inline-end {
border:2px solid;
clear: inline-end;
}
<p class="inline-end">inline-end contents</p>
.inline-end {
border:2px solid;
clear: inline-end;
}
<p class="inline-end">inline-end contents</p>