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定义浮动的那句话有点小问题。
第二句话的后半句应该改成：
所以文档的普通流中的块框在浮动框渲染之后会表现得就像浮动框不存在一样。
综上所述，感觉浮动框并没有脱离文档流。
不知道个人的理解是否正确， 文中难免有一些错误， 希望读者发现并指出。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
