目次
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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? Apr 05, 2025 am 06:15 AM

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

WebアノテーションにY軸位置の適応レイアウトを実装する方法は? WebアノテーションにY軸位置の適応レイアウトを実装する方法は? Apr 04, 2025 pm 11:30 PM

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

HTML、CSS、およびJavaScript:Web開発者に不可欠なツール HTML、CSS、およびJavaScript:Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

See all articles