css float_html/css_WEB-ITnoseの学習体験

css float の詳細説明

@(css float)[hasLayout|clear float|Miaotong]

css float の定義と使い方

float 属性は、要素がどの方向にフロートするかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フローティング要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。
非置換要素をフローティングにする場合は、明示的な幅を指定します。それ以外の場合は、可能な限り狭くなります。
注: 行上の浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、このプロセスは特定の行に十分なスペースができるまで継続します。

默认值：none；继承性：no；版本：CSS1JavaScript 语法：object.style.cssFloat="left"；

可能な値

值						描述left					元素向左浮动。right					元素向右浮动。none					默认值。元素不浮动，并显示在其在文本中出现的位置。inherit					规定应该从父元素继承 float 属性的值。

簡単な例


float:left がここで使用され、ul 要素と要素を左に移動します。

クリアフロート

クリアフロートとは何ですか？
クリアフロートを「クリアフロート」と訳すことに慣れている人が多いですが、フロートによって引き起こされる問題を考えると、私たちがしなければならないのは、クリアフロートだけでなくクローズフロートも含めたフロートの影響を理解することだと思います。 . float が他の要素に影響を与えないようにします。

なぜ float をクリアする必要があるのですか?
float をクリアする必要がある理由は、float に不満があるからではなく、場合によっては float がレイアウトに問題を引き起こし、float をクリアしなければならないからです。 。 インパクト。以下は、float および clear float メソッドによって引き起こされるレイアウトの問題の一部です:
コードとレンダリングは次のとおりです:

上記の例は、内側の div が float の場合、高さ、パディング、およびマージンが次のとおりであることを示しています。この場合、親の高さは 0 であり、親コンテナの高さは内部コンテンツの高さだけ拡張できることがわかります。これが float によって引き起こされる高さの崩壊の問題です。

親コンテナの高さを設定したらどうなるでしょうか?
コードとレンダリングは次のとおりです:



親コンテナの高さを設定するとき、高さは0ではなく200ピクセルに設定されることがわかりました

親コンテナにマージンとパディングを設定すると、また状況はどうですか？
コードとレンダリングは次のとおりです:

上記の例は、親 div の高さを設定せず、パディングとマージンのみを設定した場合、レンダリングに示されているように、実際の高さは次と等しいことを示しています。上下の境界線、および上下のパディング。マージンを追加した後も、コンテンツの高さは 0 のままで、float により高さが崩れます。

この場合、clear float メソッドは次のとおりです:
方法 1: 新しい要素タグを追加し、clear: 両方を適用します。
コードとレンダリングは次のとおりです:

上記の例clear:both を使用すると、親 div の高さは子レイヤーの高さによって増加し、コンテンツの高さは 50px になり、パディングとマージンは影響を受けないことを示します。この方法の長所と短所は次のとおりです:

長所: 学びやすく、使いやすく、習得しやすい。

短所: 構造とパフォーマンスの分離に準拠しておらず、無駄なタグが多数追加され、後のメンテナンスに不便であるため、使用はお勧めできません。

方法 2: 親 div 定義 overflow:auto/hidden; (ここでの親 div は div#wrap を指します)
コードとレンダリングは次のとおりです:

上記の例は、方法 2 を通じて、効果を実現するために、コンテンツの高さも 50px に変更され、パディングとマージンは影響を受けません。

原則:
ブロック書式設定コンテキスト (ブロックレベルの書式設定コンテキスト) は、W3C CSS 2.1 仕様の概念であり、要素がコンテンツをどのように配置するか、また他の要素との関係や相互作用を決定します。

ブロック書式設定コンテキストが作成された要素には、その子要素が次々と配置されます。それらの垂直方向の開始点は、それを含むブロックの上部であり、隣接する 2 つの要素間の垂直方向の距離は、「margin」属性によって異なります。ブロック フォーマット コンテキスト内の隣接するブロック レベル要素の垂直マージンが折りたたまれます。

BFC の使用: 非 BFC 要素は、float が追加されたサブ要素の高さの値を無視し、その上部と下部のマージンはその内部と外部のマージンと一緒に折り畳まれます。 float 要素は、それ自体とその子要素のレイアウトに影響を与えます。

BFC のトリガーは、これら 3 つの問題を解決する効果的な方法です。これが、overflow:hidden/auto を使用してフローティングやその他の問題を解決できる理由です。

BFC

をトリガーするための条件:

「float」の値が「none」ではない

「overflow」の値が「visible」ではない

「display」の値が「table-cell」である
「table-caption」、または「inline-block」
「position」の値は「static」でも「relative」でもありません

したがって、オーバーフロー属性を使用してフロートをクリアする場合、オーバーフロー属性には 3 つの属性値 (hidden、auto、visible、scroll、inherit) があることに注意してください。 float をクリアするには hidden 値と auto 値を使用できますが、この値では float をクリアする効果は得られません。IE6 では hasLayout をトリガーする必要があります。
overflow:auto; メソッドを使用する利点と欠点は次のとおりです:

利点 : 構造とパフォーマンスの分離に準拠しており、コードの量が非常に少ないです。

短所: 複数のネストの後、Firefox では場合によってはすべてのコンテンツが選択されるため、使用はお勧めできません。
overflow:hidden; メソッドを使用する利点と欠点は次のとおりです:

利点: 構造とパフォーマンスの分離に準拠しており、コードの量が非常に少ないです。

短所: コンテンツが増加すると、自動行折り返しが発生しやすくなり、コンテンツが非表示になったり、オーバーフローする必要がある要素が表示されなくなり、レイアウトに影響を与えるため、使用はお勧めできません。

方法 3: 親要素も float に設定されます
コードと効果は次のとおりです:

利点: 構造とパフォーマンスの分離に準拠し、コードの量が非常に少ない。

欠点: 親要素に隣接する要素のレイアウトが影響を受けます。フローティングする親コンテナを探し続け、レイヤーごとに上方向に検索することはお勧めできません。そして、それは margin:0 auto; の水平方向のセンタリングと競合します。
方法 4: br タグを使用します (br で clear="all")
この方法はやや特殊ですが、br には clear="all | left | right | none" 属性があります
コードと効果は次のとおりです。 :

利点: 空のタグメソッドよりもわずかにセマンティックであり、コードが少なくなります。

短所: ただし、セマンティックではなく、構造とパフォーマンスの分離に違反します。使用しないことをお勧めします。
方法 5: 親要素に display:table を設定するか、または set display:inline-block;

利点

: 構造的なセマンティクスは完全に正しく、コードの量は非常に少ないです

短所

: display:table; ボックス モデルの属性が変更され、一連の問題が発生しました。お勧めしません。 display:inline-block;cannot set margin:0 auto;

方法 5

: Use:after 疑似要素 注意すべき点: after は疑似要素 (Pseudo-Element) であり、疑似クラスではありません(一部の CSS マニュアルでは、これを「疑似オブジェクト」と呼んでいます)。 IE6-7は:afterをサポートしていないため、zoom:1を使用してhasLayoutをトリガーします。
このメソッドは次から派生しています: How To Clear Floats Without Structural Markup http://snipplr.com/view/86/clear-floats-without-structural-markup/
コードと結果は次のとおりです:

利点

: 構造とセマンティクスは完全に正しく、コード サイズは中間です。

短所

: 不適切に再利用するとコードの量が増加します。 スタイルは次のように記述することもできます: .clearfix:after {
content: ".";
display: block;
height: 0;
clear: Both;
visibility: hidden;
}
.clearfix {display : inline- block;} /* for IE/Mac /


IE/Mac の市場シェアが低いため、次のように簡略化できます:
.clearfix:after {content:"."; :0;visibility:hidden;clear:both; }
.clearfix {zoom:1; }
ここで、clear:both; はすべてのフロートをクリアすることを意味します。 ; FF/chrome/opera/IE8 の display:block; は欠落できません。content() は値を持つか空にすることができます。 Visibility:hidden; の機能は、ブラウザがそれを表示するだけでレンダリングできるようにして、フロートをクリアできるようにすることです。
HTML コードを作成するときに、Firefox やその他の W3C 標準に準拠するブラウザーでは、外部コンテナとして DIV があり、内部 DIV に float スタイルが設定されている場合、外部コンテナ DIV は使用できないことがわかりました。中がクリアではありません。
このclearfix CSSはafter疑似オブジェクトを使用しており、clearfixが適用される要素の最後にコンテンツ内のコンテンツを追加します。ここではピリオド「.」が追加され、その表示はブロックに設定され、クリアは両方に設定されます。これにより、コンテナを開けるという目的が達成されます。ここで説明します:

CSS content 属性




定義と使用法
content 属性は、生成されたコンテンツを挿入するために、:before および :after 疑似要素と組み合わせて使用​​されます。

説明

この属性は、要素の前後に配置される生成コンテンツを定義するために使用されます。デフォルトでは、これは多くの場合インライン コンテンツですが、このコンテンツが作成するボックスのタイプは、表示属性を使用して制御できます。
デフォルト値:normal
継承: noバージョン: CSS2JavaScript 構文: object.style.content="url(beep.wav)"

Value

none
normal
コンテンツ仕様
inheritは、継承する必要があることを指定します親要素 content 属性の値を継承します。

詳細については、リンクを参照してください: http://www.w3school.com.cn/cssref/pr_gen_content.asp

結論

この記事には hasLayout や BFC などが含まれます。レベルが限られているため、ここでは個別に説明しません。調査後に別の記事で説明します。
今日はここまでです。間違いがあればご指摘ください。 -----ミャオトン