CSSフローティングボックスがドキュメント外にあるかどうかの解析 flow_html/css_WEB-ITnose
float 属性を理解する前に、まず HTML の display 属性に関する関連知識を理解する必要があります。
一般的に使用される表示属性には、inline、block、inline-block があります。
inline はインラインを意味します。 一般的な HTML タグ (span、font、a、b、em など) はすべてインライン要素です。
いわゆるインラインは、簡単に理解すると、行を折り返さない要素です。
<body> <b>bold element</b> <a href="http://www.google.com">google</a> <font color='red'>red font</font> <span style="height: 230px;width:100px;">span</span></body>
結果は次のとおりです:
この例は非常に単純で、改行がないという inline 属性の特性を示しています。 ページ上の 4 つの要素のテキストが相互に接続されています。
ここで注意すべきことが1つあります。 インライン要素は幅と高さの属性をサポートしません。 たとえば、例のspan要素の幅と高さは設定されていますが、機能しません。
blockとは「ブロック」という意味です。 block 要素は inline 要素の逆で、自動的に折り返されます。 div、form、ul、li、p、h1 などの一般的な HTML タグはすべてブロック要素です。
<body> <form name="testForm" action=""> <input type="text" name="demo"/> </form> <div> div content </div> <h1>h1</h1> <p>p</p> <ul> <li>123</li> <li>123</li> <li>123</li> </ul> <span>span!</span> <span>span!</span></body>
結果は次のとおりです:
このブロック要素がデフォルトでラップされていることが図から明らかです。
inline-block については、この記事では説明しません。
では、ブロック要素を内向的要素にする方法はあるでしょうか?
確かにそうです、方法は 2 つあります。
最初の方法は、CSS を通じてブロック要素の表示属性を変更することです。単に inline に変更します。
<body> <div style="width: 40px; height: 40px; margin-right: 10px;display:inline;"> div1 </div> <div style="width: 40px; height: 40px; margin-right: 10px;display:inline;"> div2 </div> <div style="width: 40px; height: 40px; margin-right: 10px;display:inline;"> div3 </div></body>
ただし、inline 属性は幅と高さを無視するため、このメソッドは基本的に実際のアプリケーションでは使用されません。 無視してください！
2 番目のタイプは、この記事で説明する float 属性です。
<body> <div style="width: 40px; height: 40px; margin-right: 10px;float: left"> div1 </div> <div style="width: 40px; height: 40px; margin-right: 10px;float: left"> div2 </div> <div style="width: 40px; height: 40px; margin-right: 10px;float: left"> div3 </div></body
w3c で float の記述を確認できます。 クリックして表示 ->
この記事は、具体的な例とともに非常に詳細に説明されています。
冒頭の文を見てみましょう:
フローティング ボックスは、その外縁が収容ボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動できます。
フローティング ボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロック ボックスは、フローティング ボックスが存在しないかのように動作します。
フローティング ボックスは、その外縁が「収容ボックス」または「別のフローティング ボックスの境界」に触れるまで移動しないことは明らかです。
w3c の最初の例を分析してみましょう:
ボックス 1 は右にフロートし、その端が幅を含む境界線に触れるので、図に示す位置に留まります。
2 番目の例を見てください:
左のピクチャ フレーム 1 は左にフロートし、含まれているボックスの境界線にも触れています。 フローティング要素はドキュメント フローの外にあり、スペースを占有しないため、ボックス 2 はボックス 1 を無視します。ただし、フローティング要素の優先順位が高いため、ボックス 2 はボックス 1 の下にあり、カバーされます。ボックス 3 にはフロートがなくブロック要素であるため、ボックス 2 の下に自動的に折り返されます。
これら 2 つの例は 2 つの原則を示しています。
まず、浮動要素は文書要素から分離されており、スペースを占有しません。 浮動小数点数でない要素は直接無視されます。
第二に、浮動要素は、含まれているボックスと近くの別の浮動ボックスに基づいて浮動し、それに接触すると停止します。
ここに注意点があります:
まず、フローティング ボックス定義の 2 番目の文の後半を見てみましょう (したがって、ドキュメントの通常のフロー内のブロック ボックスは、フローティング ボックスが存在しないかのように動作します) )
通常のフローの「ブロック ボックス」は、フロート ボックスが存在しないかのように動作することに注意してください。 これは、インライン要素ではなく、ブロック ボックスを指します。
例:
#container { background-color: red; padding: 10px; height: 200px; width: 200px;}.left { float: left; width: 50px; height: 50px;}.right { float: right; width: 60px; height: 60px;}.green { background-color: green;}.blue { background-color: blue;}
<body> <div id="container"> <div class="left blue"></div> <div class="right blue"></div> <span>This is inline element</span> </div></body>
結果は次のようになります。
それは見えます。スパンインライン要素は 2 つの浮動要素を無視しません。
上記のコードのspan要素をdivブロックボックス要素に置き換えます。
変更された HTML コードは次のとおりです:
<body> <div id="container"> <div class="left blue"></div> <div class="right blue"></div> <div style="width: 50px; height: 60px;" class="green"></div> </div></body>
結果:
この緑色のブロック ボックス要素がフローティング要素を無視していることは明らかです。
しかし、HTML コードを次のように変更すると:
<body> <div id="container"> <div style="width: 50px; height: 60px;" class="green"></div> <div class="left blue"></div> <div class="right blue"></div> </div></body>
结果却是这样:
从结果可以很明显地看出， 块框元素在container容器中占据了第高度为60像素的那块区域。 两个浮动的元素都是在这块框区域下开始渲染的。
这样是不是违背了w3c的定义：浮动框会无视普通流中的块框。
根据个人的理解：
这可能是由于html的渲染顺序导致的。html代码中先写了块框， 导致先渲染了这个块框的区域。
之后渲染两个浮动框， 渲染浮动框的时候发现上面已经被块框渲染过了。 于是从块框之后开始渲染。
我们在上个例子中container容器中最后1个div后再加1个div
<div style="width: 50px; height: 60px;" class="green"></div>
在渲染最后1个div的时候。此时发现已经有两个浮动框， 这时候就会忽略这2个浮动框，从第一个块框开始继续渲染，也就跑到了第一个块框之后的位置。
所在在w3c定义浮动的那句话有点小问题。
第二句话的后半句应该改成：
所以文档的普通流中的块框在浮动框渲染之后会表现得就像浮动框不存在一样。
综上所述，感觉浮动框并没有脱离文档流。
不知道个人的理解是否正确， 文中难免有一些错误， 希望读者发现并指出。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7401
15
1630
14
1358
52
1268
25
1217
29
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆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の場合
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
