目次
Float の歴史
Floatによる親要素の高さ崩れのバグ?
いいえ、バグではありません
テキストの折り返し効果の実装
クリアフロート
clear:both の役割
撑开父元素空间的奥秘
总结
ホームページ ウェブフロントエンド htmlチュートリアル 冬休みフロントエンド学習(8) ~CSSのフローティングとクリアを理解する float_html/css_WEB-ITnose

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

Jun 21, 2016 am 08:57 AM

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

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

Float の歴史

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

まあ、とても簡単です。

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

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

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

<div id="div">  <img src="./source/head.jpg"></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浮动的理解也加深了。浮动为何引起父元素塌陷和清除浮动为何能撑开父元素这两个问题,一直是我的盲点。所以这次寒假,集中了两天时间去攻克它(除夕和正月初一,大过年的写代码,感觉有点怪但效率却出奇的高……)。

参考链接:

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

See all articles