冬休みフロントエンド学習(8) ～CSSのフローティングとクリアを理解する float_html/css_WEB-ITnose

CSS float は、Web ページを作成するときに最もよく使用するプロパティの 1 つです。しかし、浮遊についての私の理解については、「それは知っていますが、なぜそうなのかはわかりません」としか言いようがありません。フローティングは使い方を知っていれば使えると言われることが多いですが、優れたフロントエンドになりたいのであれば、これらの共通特性を徹底的に理解する必要があります。

偶然にも、MOOC.com で、Zhang Xinxu 教師が「CSS の徹底理解: Float」コースを教えました。記事の最後にリンクがありますので、興味のある方は聞いてみてください。

Float の歴史

Float デザインの本来の目的は、テキストの折り返し効果を実現することです。下の写真のように (w3school からの写真):

まあ、とても簡単です。

Floatによる親要素の高さ崩れのバグ?

ここでは、例を使用して、子要素が float に設定され、親要素の高さが崩れる問題を説明します。

まず div を記述し、その中に画像を挿入します。

<div id="div">  <img  src="/static/imghwm/default1.png"  data-src="./source/head.jpg"  class="lazy" alt="冬休みフロントエンド学習(8) ～CSSのフローティングとクリアを理解する float_html/css_WEB-ITnose" ></div>

誰が見てもはっきり見えるように、div に境界線を設定しましょう。

CSS 設定は次のとおりです:

#div { border: 5px solid red; width: 600px;}

最終的な効果は次のようになります:

合格 Chrome コンソールでは、この時点で div の高さが 464px であることがわかります。

次に、その画像に浮遊効果を加えてみましょう。

#div img{ float: left;}

Webページを改めて見てみると、親要素が崩れていて、それまでの枠線が消えて線になっていました。

この時点で、コンソールに移動して div の高さを確認します。高さは 0px です。

いいえ、バグではありません

多くの人はこの現象をフローティングによるバグと呼んでいます。しかし、Float の目的を最初から考えてみましょう:

“Float设计的初衷，是为了实现文字环绕效果。”

では、古代の野蛮なインターネット時代に、テキストを囲む効果を実現する方法を考えてみましょう。写真？賢明なプログラマは、Float 属性を追加し、フローティング子要素と高度に折りたたまれた親要素の機能も導入しました。この文を見たとき、私は長い間考えました。親要素の高さが崩れてテキストが画像の周りを回り込むことができる理由が理解できないからです。それでビデオを10回以上繰り返して見たり、手書きでデモを書いたりして、ようやく理解できました。

要約すると、核心は 1 つの文にあります。

“浮动元素会脱离文档流。”

ドキュメント フローとは何かというと、私は次のとおりです。ここで紹介されたものは何なのかわかりません。ただし、フローティング要素はドキュメント フローの外にあるため、高さは計算されません。

ここでは、div の高さを確認するために段落を追加します。

画像からわかるように、段落の追加により div の高さが伸びています。

つまり、子要素がフローティングであることによって親要素の高さが崩れる理由は次のとおりです。 div の高さが事前に設定されていないため、div の高さは子の高さによって決まります。それに含まれる要素。フローティングはドキュメント フローの外にあるため、画像の高さは計算されません。このときのdivではdiv内の子要素の高さが0になったことに相当するため、親要素の高さが潰れてしまいます。

テキストの折り返し効果の実装

では、テキストの折り返し効果はどのように実現されるのでしょうか?実際、これは非常に簡単に言うと、親要素の高さが折りたたまれているため、画像の高さに関係なく、テキストが通常の順序で配置されます。画像の帯域幅はまだ残っているため、テキストの折り返し効果が得られます。

クリアフロート

フロートを導入した後は、当然クリアフロートを導入します。ここでは、フロートをクリアするさまざまな方法については詳しく説明しません。代わりに、clear:both を設定すると float がクリアされ、親要素が展開される理由を調べてみましょう。

clear:both の役割

clear:both の役割は誰もがよく知っています。クリアの左、右、その他の属性については、ここでは個別に記載しません。

<div style="clear: both;"></div>

親要素の最後に、次のコード行を追加します。この図から、子要素が浮いているために親要素が折りたたまれる問題が解決されていることが簡単にわかります。

そして、clear:both の使い方を知っているだけで、どうすれば知識欲を満たすことができるでしょうか?私は、このコード行が何を行うかよりも、なぜフロートをクリアするのかの方が気になります。

それに応えて、私は書類をめくり続けました。

w3school では、clear は次のように定義されています。

clear 属性规定元素的哪一侧不允许其他浮动元素。

もちろん、まだ見にくいですがこのようにして、clear がフロートをクリアして親要素の高さを拡張できる理由を理解してください。栗をあげましょう！

要素 A が最初に左にフロートするように宣言されると、ドキュメント フローから外れるため、要素の右側にスペースが生じ、スペースの長さと幅は次のようになります。フローティング要素の長さと幅と同じです。

次に、別の要素 B を宣言します。要素 A の右側の空きスペースに要素 B を配置できれば、要素 B は自動的に追加されます。

わかりやすいデモを以下に書きます。

HTML 部分は次のとおりです:

<div id="div">  <div id="a">    <p>I'm divA</p> //此处用p  </div>  <div id="b">    <span>I'm divB</span> //用span，防止两个都是p，不能展现父元素塌陷效果。  </div></div>

CSS 部分は次のとおりです:

#div {  border:5px solid red;  width:400px;}#a {  background:rgba(149, 149, 149, 0.42); // 为了方便演示，A的背景色设置成半透明。  width:200px;  float: left;}#b {  background: #6EEBC1;  width:300px;}

效果图长这样：

从图上可以看到，元素B的一部分是在元素A空出的空间内的。并且I’m divB这句话在元素A的右侧。且父元素高度塌陷，父元素现在的高度就是元素B的高度。

那么如果元素A右侧空出的空间内，放不下元素B呢？

我们把元素B宽度调整为200px。

可以看出，元素B就自成一行了。

给元素B加入 clear:both 后，元素B将忽略左边浮动所产生的空间，不去补空缺。

如图所示，元素B会另起一行。而不是缩到浮动产生的空间内。

撑开父元素空间的奥秘

在w3school中，clear的定义中还有这么一句话：

“在 CSS2.1 中，会在设置清除浮动的元素上外边距之上增加清除空间，而外边距本身并不改变。”

也就是说， 因为浮动而产生的空白空间，会被填充为实际存在的空间。 。那么，自然就能撑开父元素。

总结

总结下来，浮动与清除浮动的顺序关系如下：

1. 设置元素A浮动，元素脱离文档流，不计算高度。父元素出现高度塌陷。
2. 浮动元素A产生空白空间。空间长宽等于元素A的长宽。后面元素会自动补空缺。
3. 给浮动元素之后的元素B设置 clear:both ，元素B将不去补空缺。
4. 元素B不仅不补空缺，还会把元素A因浮动而产生的空白空间填充为实际空间。
5. 实际空间被计算高度，父元素被撑开。

这么一番走下来，花了很多时间去思考，去写demo。但对CSS浮动的理解也加深了。浮动为何引起父元素塌陷和清除浮动为何能撑开父元素这两个问题，一直是我的盲点。所以这次寒假，集中了两天时间去攻克它（除夕和正月初一，大过年的写代码，感觉有点怪但效率却出奇的高……）。

参考链接：