float_html/css_WEB-ITnose の詳細な分析

フロートとは何ですか?

float は float を意味します。HTML におけるその機能は、要素を通常のドキュメント フローから取り出し、親要素の「左端」または「右端」に移動することです。この定義におけるいくつかの名詞の概念を説明しましょう:

ドキュメント フロー: HTML では、ドキュメント フローは要素が上から下に配置される順序です。 ドキュメント フローから外れます: 要素が通常の順序から外れます。 左端/右端: 前述の親要素の左端と右端への移動は、要素が別の浮動要素または親要素のコンテンツ領域 (パディングを除く) の境界に当たるまで左または右に移動することを意味します。親要素に対する float の影響

親要素の場合、要素が float になった後、通常のドキュメント フローから切り離されるため、親要素を支えることができず、親要素が折りたたまれます。その影響は次のとおりです。下の図。

 1 //CSS 2 #wrapper { 3     padding: 20px; 4     border: 1px solid red; 5     width: 350px; 6 } 7 .floatL { 8     width: 100px; 9     height: 100px;10     border: 1px solid #000;11     float: left;12 }13 .floatR {14     width: 100px;15     height: 100px;16     border: 1px solid #000;17     float: right;18 }19 .blue {background: #6AA;}20 .red {background: #A66;}

1 //html 2 <div id="wrapper"> <div class="floatL blue">AAAAAAAA</div> </div>

兄弟要素（非浮動）への影響

兄弟要素がブロックレベル要素の場合、その要素は浮動要素を無視してその位置を占有し、要素ははフローティング要素内にありますが (そのスタック位置は z-index プロパティを通じて変更できません)、その内部テキストとその他のインライン要素はフローティング要素の周囲に回り込みます。 IE 6 と 7 ではパフォーマンスが異なることに注意してください。IE 6 と 7 では、非浮動要素が独自の hasLayout をトリガーすると、その要素は浮動要素の右側に従います。そして、IE6 では 2 つの間に 3px のギャップがあります。これは有名な「IE 3px バグ」です

1 //CSS，其他的样式按照上面给出的，此处就不再重复了2 .block {3     width: 200px;4     height: 150px;5     border: 1px solid #000;6     background: #CCC;7 }

最新のブラウザ:

IE 6:

IE 7:

兄弟要素がインラインの場合

ru les 要素は周囲に配置されます浮動要素。

1 <div id="wrapper">2     <div class="floatL blue">AAAAAAAA</div>3     <div class="block">BBBBBBBBB</div>4 </div>

1 <div id="wrapper">2     <div class="floatL blue">AAAAAAAA</div>3     文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字4 </div>

兄弟要素 (浮動) への影響

同じ方向の浮動要素:

浮動プロセス中に浮動要素が同じ方向の浮動要素に遭遇すると、次のようになります。この鮮やかな比喩を使って次のように説明できます。チケット購入センターで、誰かがチケット購入列から次のチケット購入列に走る場合、最初にそこに走った人が自然に前の席に座ります。ただし、このチケット購入キューは依然として現在のチケット購入センターに配置されているため、このフローティング キューと通常のドキュメント フロー キューは依然として同じ親要素内にあります。

1 <div id="wrapper">2     <div class="floatL blue">AAAAAAAA</div>3     <img src="XXX.png">4 </div>

反対方向の浮動要素:

上記の比喩で述べたように、チケット購入センターの左側と右側にチケット購入ポイントがあると仮定できます (図に示すように) 、ここでは div をチケット購入者と見なします)、左側にフローティングするキューは、左側のチケット購入ポイントでのチケット購入キューとみなすことができ、反対方向にフローティングするキュー (つまり、右側のフロート) は次のようになります。チケット購入の列が正しいチケット購入ポイントに配置されるため、チケット購入センターが十分に広い場合、2 つのコーホートの母集団は相互に影響を受けません。したがって、彼らは同じレベルにいます。

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3     <div class="floatL blue">BBBBBBBBBB</div>4 </div>

ただし、チケット購入センターが狭すぎる場合、または左右のチケット購入列が長すぎる場合は、いずれかの列が新たな列に配置されます（ここはB列です。人によっては列が変わる可能性があります）。なぜ A キューを 1 行にしないのですか? 以下の HTML 構造から、これはキュー A がキュー B よりも早く確立されるためであることがわかります。先着順の原則によれば、キュー B のチケット購入者は当然のことながら、 1 つの列に十分な座席がない場合は、別の列を開始する必要があります)。

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3     <div class="floatR blue">BBBBBBBBBB</div>4 </div>

同じ行に 1 人のチケット購入者のためのスペースがない場合、2 つのキューは 2 行ずつずらして配置されます

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3     <div class="floatL red">AAAAAAAA</div>4     <div class="floatR blue">BBBBBBBBBB</div>5     <div class="floatR blue">BBBBBBBBBB</div>6 </div>

float が独自の要素に及ぼす影響

float オブジェクトが考慮されますブロック オブジェクト (ブロック レベル) として。つまり、表示属性はブロックと同じです。

子要素に対する float の効果

要素がフローティングの場合、明確なフローティングがなければ親要素を展開することはできませんが、独自のフローティング子要素自体を展開させることはでき、特定の幅の条件下では定義なしで自身を展開できることはわかっています。 、自身の幅を100%からアダプティブ(浮動要素表示:ブロック)に変更します。その高さと幅は、フローティング要素の高さと非フローティング要素の高さの間の最大値です。

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3     <div class="floatL red">AAAAAAAA</div>4     <div class="floatL red">AAAAAAAA</div>5     <div class="floatR blue">BBBBBBBBBB</div>6     <div class="floatR blue">BBBBBBBBBB</div>7 </div>

1 //这里我们去掉#wrapper的固定宽度,并在其外部增加一个固定宽度的div,以便更好地展示2 <div class="container">3     <div id="wrapper">4         <div class="floatL red">AAAAAAAA</div>5         <div class="floatL red">AAAAAAAA</div>6     </div>7 </div>

1 <div class="container">2     <div id="wrapper" style="float:left;">3         <div class="floatL red">AAAAAAAA</div>4         <div class="floatL red">AAAAAAAA</div>5     </div>6 </div>

1 .block {2     width: 250px;3     height: 50px;4     border: 1px solid #000;5     background: #CCC;6 }

1 <div class="container">2     <div id="wrapper" style="float:left;">3         <div class="floatL red">AAAAAAAA</div>4         <div class="floatL red">AAAAAAAA</div>5         <div class="block"></div>6     </div>7 </div>

親要素以外の要素に対する float の効果

親要素の外側の非浮動要素

ご覧のとおり上記のことから、要素がフローティングされている場合、明確なフローティングがなければ親要素を展開することはできません。つまり、親要素の幅と高さが両方とも 0 です。また、親要素以外の非浮動要素も浮動要素を無視し、浮動要素は別世界にあるように見えます。

1 .block {2     width: 150px;3     height: 150px;4     border: 1px solid #000;5     background: #CCC;6 }

1 //CSS2 .outer {3     height:150px;4     width: 350px;5     border:1px solid blue;6 }

親要素外の浮動要素

浮動要素の親要素以外の要素が浮動要素の場合、同じ世界にあるように見えます。

2つの要素の浮動方向が同じ場合:

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3 </div>4 <div class="outer" style="float:left;"></div>

两个元素的浮动方向相反时：

1 //CSS,这里我们在他们外面增加一个固定宽高的div以便展示，否则右浮动的元素会浮动到body的右边界2 .container {3     width:650px;4     height: 250px;5     border: 1px solid #000;6 }

1 <div class="container">2     <div id="wrapper">3         <div class="floatL red">AAAAAAAA</div>4     </div>5     <div class="outer" style="float:right;"></div>6 </div>

1 <div class="container">2     <div id="wrapper">3         <div class="floatL red">AAAAAAAA</div>4         <div class="floatL red">AAAAAAAA</div>5         <div class="floatL red">AAAAAAAA</div>6         <div class="floatL red">AAAAAAAA</div>7     </div>8     <div class="outer" style="float:right;"></div>9 </div>