floatドンドン登場-!

👉 フローティング

上の図に示すように、画像は左に揃えられ、その後のテキストは画像に沿って空白によく埋め込まれている.float:leftまたはfloat:rightを使用して、属性を与える要素を左側および右側に配置できます.こんな整然とした列を与えてくれるなんて素晴らしい!終了!

...

と言えば、floatはそんなに簡単な友達ではありません.

まず、floatを与える要素が他のblock要素とは全く異なることを理解する.

もちろん、ブラウザではfloatと後ろに付いている要素がくっついて良いと思いますが、floatを与える要素は名前のように浮かび上がります.floatアトリビュートを付与すると、要素はそのアトリビュートの影響を受けて囲まれた形状を形成したり、円領域の下に入ったりします.もちろん、この属性は画像とテキストを一致させるために生成されるので、別のレイヤに入ることによってコンテンツが重なるわけではない.

とはどういう意味ですか、

このような正常で正常なプロセスでは、集約ブロックと集約ブロック、

親にお世話になって、いい位置を占めていました.

親(ピンクゾーン)がオタクとオタクの高さをよく認識していることがわかります.

ただし、「オタク」ブロックの「フローティング」を「家出オタク」の子に設定すると

これで親は(ピンクゾーン)オタクが私の子供であることしか知らず、オタクの高さしか知らず、

外の女の子はfloatの次元に行きます.そのため、屋根の下の部分はオタクですが、「オタク」という字は他人に隠されていません.floatの特性だから!

このように、ブロックレベルと行内要素レイアウトを担当するnormalflowから離れたfloatは、normalflowの親要素がfloatのために破棄されたサブ要素を認識できないため、問題が発生する

1.親に高さを設定すればいいんじゃないですか?

親が子供の高さを認識していないことから生じる問題であれば、簡単に親にheight値を与えればよい.しかし、これは根本的な解決策ではありません.

2.親要素にブロックフォーマットを追加-コンテキストの属性オーバーフローを作成できます(表示以外)。

ただし、width、heightを指定した親要素に対してoverflow:hiddenは、hiddenを使用するとオーバーフローしたサブ要素が炒められるため、良い方法ではありません.

3.clearプロパティの使用

clearは、floatプロパティを使用するときの周囲のコンテンツストリームを無効にするための専用プロパティです.floatを使用する要素は、そのソート方向clear : leftでfloat : leftが無効になり、clear : rightでfloat : rightが無効になり、clear : bothで2つの要素のfloatが無効になります.clearプロパティの後、floatは影響を受けません.

このように、clear属性をfloat要素の後の兄弟要素に付与すると、兄弟はfloat属性を有する要素を識別し、親要素が家出した子要素を識別するのと同じ高さの結果を生じる.

4. clear-fix

の最初の3つのように、clearプロパティを提供するために別のdivを作成する必要がある場合があります.したがって、親要素に子要素を追加してclearを与える方法です.

.wrap::after {
	content:'';
	display:block;
	clear:both;
}

この方法は不要なラベルを生成することを避けることができ、現在業界で最も多く使用されている.

Q.display：inline-blockと変わらないですか？

floatを適用するプロパティは、行内要素のように機能し、次の要素は行内ブロックのように機能します.ただし、display:inline-blockを使用すると、ブロック間に余白が発生します.コードの中の企業は空白と表示されているので、コードをめちゃくちゃに貼るか、font-size:0に1つずつ置き換えます.簡単に並べ替えて、float:left,rightで行いましょう.

Q.Flexをそのまま使うとつけないのですか？

flexには保護が必要だという欠点があります.floatのような場合、自分と兄弟要素、自分と親要素の関係などの外部要素に関係を設定しますが、flexはflex要素内のサブ要素を配置する要素なので、保護するためにマークが必要です.floatはhtmlを長くしないし、ブラウザの互換性も良いのでfloatでしょう.

float

flex

心得

👉 flexはまだしっかり勉強していませんが、CSSを勉強する立場で「ソートはamazedaflexじゃないですか?」ずっと考えていましたが、まだ業界ではあまり使われていないのでちょっと驚きました.

👉 floatを学ぶことで、ブロックフォーマットコンテキストをもっと知る必要があると思います.これまでhtmlのようにすべての要素を識別できる新しいブロックスタック脈絡が形成されたと理解されている.

次はやってみたい

👉 ブロックフォーマットコンテキストに関するわかりやすいブログ記事を作成!

👉 floatを使用してジョブをソートしてみます