clear CSS プロパティとは
トピック：floa要素の回り込みを解除する、事ができる 要素のどの辺の回り込みを解除するかを指定する
プロパティ clear
実例 コード 1
サンプル コードを試すclearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both;}
使用上の注意：- 浮動要素しか包含しない要素は、高さがなくなるこのような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に
clear を設定しなければならない これは clearfix と呼び。使用方法のひとつとして ::after疑似要素 に clear を使う。
プロパティ 定義と使用法
| デフォルト値・初期値 : | none |
|---|
| 適用対象 : | ブロックレベル要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS1 ～ |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.clear="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | clear: none | left | right | both | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
none | デフォルト。両側のフローティング要素を許可する |
left | left：左寄せの要素に対する回り込みを解除 |
right | right：右寄せの要素に対する回り込みを解除 |
both | both：左寄せ/右寄せの要素に対する回り込みを解除 |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| clear | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯4 | フルサポート◯3.5 | フルサポート◯1 |
|---|
inline-start,inline-end | サポートなし✖ | サポートなし✖ | フルサポート◯55 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| clear | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯あり | フルサポート◯あり | フルサポート◯4 | フルサポート◯6 | フルサポート◯1 | フルサポート◯あり |
|---|
inline-start,inline-end | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯55 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
CSS clear | CSS プロパティ 値| 意味 使い方 実例 – WebRef