clearfix:after[使用法]_html/css_WEB-ITnose

CSS ブラウザ HTML

.clear{clear:both}

を直接使用できないのはなぜですか?
どのブラウザ

.clear{clear:both}

と互換性がないのかなど、HTML+CSS の詳細な使用法を投稿していただければ幸いです。また、.clearfix:after と .clearfix も投稿していただければ幸いです。各ブラウザと互換性があります HTML+CSS の詳細な使用法

至急必要...フローティング要素を深く理解している友人がこの質問を解決できることを願っています

ディスカッション (解決策) に返信

明確な属性は、要素のどの側が他の浮動要素を許可しないかを指定します。

説明

clear 属性は、要素のどの側にフローティング要素を含めることが許可されないかを定義します。 CSS1 および CSS2 では、これは、クリア要素 (つまり、クリア属性が設定された要素) に上部マージンを自動的に追加することによって実現されます。 CSS2.1では要素の上マージンの上にクリアスペースが追加されますが、マージン自体は変わりません。変更に関係なく、最終結果は同じです。左クリアまたは右クリアとして宣言された場合、要素の上端はその側のフローティング要素の下マージンのすぐ下になります。
デフォルト値: なし
継承: いいえ
バージョン: CSS1
JavaScript 構文: object.style.clear="left"
例
画像の左側と右側では浮動要素は許可されません:
img
{
float Clear 属性は、要素のどちら側が他の浮動要素を許可しないかを指定します。
説明
clear 属性は、要素のどの側にフローティング要素を含めることが許可されないかを定義します。 CSS1 および CSS2 では、これは、クリア要素 (つまり、クリア属性が設定された要素) に上部マージンを自動的に追加することによって実現されます。 CSS2.1では要素の上マージンの上にクリアスペースが追加されますが、マージン自体は変わりません。変更に関係なく、最終結果は同じです。左クリアまたは右クリアとして宣言された場合、要素の上端はその側のフローティング要素の下マージンのすぐ下になります。
デフォルト値: なし
継承: いいえ
バージョン: CSS1
JavaScript 構文: object.style.clear="left"
例
画像の左側と右側では浮動要素は許可されません:
img
{
floatまず第一に、float をクリアする原則は、実際には要素が浮動するのに十分な垂直方向のマージンを残すことです。 。

<div >   <div style="float:left"></div></div>

この効果は、外側の div に内側の div が含まれないことです。フローティング要素は元のドキュメント フローから切り離されているためです。
上記の例を例に挙げます。一般的に、float をクリアするには 3 つの方法があります
。まず、外側の要素も浮動状態にします。例:

<div style="float:left" >   <div style="float:left"></div></div>

次に、この要素以外の要素に clear: Both 効果を追加します。
2 番目: 外側の div の最後に要素を追加し、この要素を使用して明確にフローティングします。
具体的な使用法:

<div style="clearfix" >   <div style="float:left"></div></div>.clearfix:atfer{content:".";display:block;visibility:hidden;height:0;clear:both;}

.clearfix{display:inline-block}

.clearfix{display:block}

最後の 2 つは、他のブラウザとの互換性のために設定されています。理由: after はすべてのブラウザーでサポートされているわけではありません。

3 番目: オーバーフロー属性を使用する

<div style="overflow:hidden" >   <div style="float:left"></div></div>

ありがとう...やっと理解できました...