HTML の基礎ゼロの必読書 - HTML の入門、プログラミングはとても簡単
第10章: float フローティング レイアウト
1.フロートとは
1.1 定義
フローティング: 要素はドキュメント フローから離脱し、指定された方向 (左または右) に移動します。親要素の端または隣接するフローティング要素に遭遇すると停止します。
1.2 注意事項
要素に float 属性を設定すると、その要素の前の要素には影響を与えず、その要素の後ろの要素にのみ影響します。
1.3 float 属性値
- left 要素は左に移動します。
- right要素は右に浮動します
- none には浮動デフォルト値はありません
2. フローティングの特徴
2.1. 要素を横に並べて1行に表示可能
(要素は設定された方向に移動し、親または隣接するフローティング要素に遭遇すると停止します。複数の要素がフローティングされている場合は、並べて表示されます)
2.2. 同じレベルのテキストとフローティング
(テキストはフローティング属性を感じることができ、テキスト コンテンツはフローティング要素の周囲にラップすることができます)
2.3. フローティングを使用してグラフィックスとテキストを囲むことができます
2.4. 要素に float 属性が設定されている場合、その要素は inline-block 属性を持つ要素になります。
(内部マージンと外部マージンをサポートしますが、適応型センタリングはサポートしませんmagrin:auto。幅と高さはデフォルトでコンテンツによって拡張され、幅と高さの属性設定がサポートされます)
2.5. インラインブロックと比較したフローティングの利点:
横方向に表示することもできますが、フローティングにすることで要素間の隙間やベースラインの位置合わせの問題が解決され、要素を左（右）に揃えることができます。したがって、一般に、水平レイアウトにはフローティング属性を使用することをお勧めします。
特定の表示:
[1] 要素は設定された方向に移動し、親または隣接するフローティング要素に遭遇すると停止します。複数の要素がフローティングされている場合は、並べて表示されます。
通常の 3 つのボックス要素は次のとおりです。
a. 最初のボックスの左側にフローティング属性を設定します:.div1{float: left;}
レンダリング:
この時点で、2 番目の緑色のボックスが欠落していることがわかりました。実際、これは欠落しているのではなく、Box 1 が float 属性を使用しているだけです。これにより、Box 1 は元の位置で左にフローティングされます。左側はその親 body 要素であるため、左への移動が停止します。このとき、2 番目の緑のボックスは元のボックスの位置を埋めるように影響を受けています。つまり、ボックス 1 がボックス 2 の上に浮いているので、見えなくなります。箱２です。
b. ボックス 1 はフローティング属性を追加しませんが、ボックス 2 にフローティング属性を追加します:.div2{float: left;}
効果は
次のとおりです: この時点では、ボックス 2 は左にフローティングされており、ボックス 1 には影響しません。左に移動し、親レベルのボディに遭遇したため、ボックス 2 の元の位置で浮動します。このとき、ボックス 3 が影響を受け、ボックス 3 が上に移動してボックス 2 の元の位置を埋めます。つまり、この時点ではボックス 2 がボックス 3 の上に浮かんでおり、ボックス 3 は見えません。
c. 3 つのボックスすべてに同時にフローティング属性を追加します。
レンダリング：
ボックス 1 は左に移動し、親ボディに遭遇すると停止します。ボックス 2 が左に移動すると、同じくフローティング属性を持つボックス 1 に遭遇します。そのため、ボックス 2 はボックス 1 の後で停止します。同様に、ボックス 3 も同じフローティングに遭遇します。属性ボックス 2 も停止しているので、これら 3 つのボックスを並べて表示できます。
[2] テキストとフロートは同じレベルにあり
、テキストはフローティング属性を感じさせることができ、テキストの内容はフローティング要素の周囲に回り込むことができます。
まずコードの一部を見てみましょう。
<style>
.box1 {
float: left;
width: 300px;
height: 300px;
background: green;
}
.box2 {
width: 300px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>
</body>
同じ大きさのボックスを 2 つ設置し、最初のボックスの左側にフロートを追加すると、最初のボックスは 2 番目のボックスの上に浮き上がり、2 番目のボックスは見えなくなります。
レンダリングを見てみましょう。2
番目のボックスが完全に覆われておらず、ボックス内のテキストがまだ見えることがわかります。これは、フローティングとテキストが同じレベルにあるためです。テキストが浮いているように感じられるため、テキストは上に上がることができません。つまり、ある要素にフローティング
属性が設定されると、次の要素はこの要素の存在を無視しますが、次の要素のテキスト コンテンツはそのまま残ります。この要素用のスペースが確保され、独自のテキスト コンテンツがフローティング要素の周囲にラップできるようになります。したがって、通常は画像とテキストのラッピングとして使用します。
[3] グラフィックとテキストの折り返し: テキスト コンテンツはフローティング要素の周囲を折り返します。フローティングの方向を選択できます。
[4] 要素にフローティング属性が設定されている場合、要素は inline-block 属性を持つ要素になります (内
マージンと外マージンはサポートされますが、magrin:auto適応型センタリングはサポートされません); 幅と高さはコンテンツによってサポートされます。 width 属性と height 属性がサポートされています。
まずレンダリングを見てみましょう。次の
ことがわかります。
- 当初、ブロックレベル要素の幅はデフォルトで親要素と同じで行表示をサポートしていませんでしたが、floating属性を使用した後は、デフォルトの幅がコンテンツに合わせて自己拡張されるようになりました（もちろん設定することもできます）これは明らかにブロックレベル要素の特徴を持っています。
- 元々、インライン要素は幅と高さの設定をサポートしていませんでしたが、floating 属性を使用した後は自分で設定できるようになり、明らかにブロックレベル要素の特性を備えています。
- インライン要素であるかブロックレベル要素であるかに関係なく、フローティング属性を使用した後は、内部マージンと外部マージンがサポートされますが、
margin:auto;適応型センタリングはサポートされません。
[5] インライン ブロックと比較したフローティングの利点:
インライン ブロック要素を使用すると要素を並べて表示できることを以前に学びましたが、いくつかの問題があります。行が表示された後、要素間にギャップがあり、ベースラインの位置合わせが発生します。問題。
float を使用すると、これらの問題なく要素を並べて表示することもできます。さらに、float を左右にフローティングすることで、左右に揃えることもできます。インライン ブロックは明らかに不可能なので、水平レイアウトを使用する場合は、より多くのフローティングを選択することがよくあります。
3.高さ崩壊問題
3.1 高さ崩壊とは何ですか?
親ボックスに高さが設定されていない場合、子ボックスはフローティング属性を持つため、ブラウザがボックスの高さを計算するときにフローティング ボックスが含まれないため、親ボックスの高さが崩れてレイアウトに影響を及ぼします。
<style>
div{
width: 1000px;
background-color: pink;
margin: auto;
}
.box1{
width: 500px;
height: 300px;
background-color: green;
}
.box2{
width: 300px;
height: 350px;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
上はピンク色の親ボックスですが、親ボックスの高さを設定しない場合はデフォルトで子ボックス3個分の高さで開きます。
レンダリングを見てみましょう:
これらの子要素にフローティング属性を追加すると、レンダリングは次のようになります:
ピンクのボックスが表示されないことがわかります。これは、ブラウザーが高さを計算するときにフローティング属性を追加しないためです。ボックスも含めて計算するため、この崩れ現象が発生し、非常に見苦しくレイアウトに影響を与えます。
3.2 浮きによる倒壊問題の解決方法：
1. 頻繁に使用される要素を親要素に直接追加します
2. overflow: hidden を親要素に追加します。BFC 効果が発生します。
- オーバーフローを非表示にする: コンテンツが親要素を超える場合、この属性と値を使用してオーバーフロー部分をトリミングし、ページをより美しくすることができます。
- フロートをクリアする 子要素がフローティングの場合は、親要素にoverflow:hiddenを追加する 1つ目の特徴によれば、子要素の余分な部分をカットする必要があるが、子要素がフローティングのためカットできないすべては親要素によってのみカットできます。要素はその高さを増やして子要素を包み込むため、親要素には高さがあり、この高さは子要素に続く適応的な高さになるため、フローティング子要素は親要素に含まれます。
3. この親ボックスで、最後に空の div を新規作成し、この div に clear 属性を追加します。clear：both；これを設定すると、間違いなく意味のないタグが追加されます。大きなページにそのようなタグが多すぎるのは良くありません。
クリア属性:
- 属性値: 左右のフロートを同時にクリアします。
- 左クリア左フロート
- right は右のフロートをクリアします
4. pseudo-class::after を通じてフロートをクリアする
疑似クラスを使用して float をクリアすると、空の div 要素の代わりに疑似クラスが使用されることを除いて、空の div を作成してそれを clear: Both に設定するのと同じ効果があります。
- content: ''; 疑似要素を開くためのキーを記述する必要があります
- display: block; pseudo-element はブロックレベルの属性となるインライン要素です
- クリア: 両方; フローティング プロパティをクリアする
完全なデモ:
<style>
div {
/* 方法一：給父级设置一个高度 */
/* height: 500px; */
width: 1000px;
background-color: pink;
margin: auto;
/* 方法二：在父元素里添加溢出隐藏属性overflow */
/* overflow: hidden; */
}
.box1 {
float: left;
width: 500px;
height: 300px;
background-color: green;
}
.box2 {
float: left;
width: 300px;
height: 350px;
background-color: blue;
}
.box3 {
float: right;
width: 200px;
height: 200px;
background-color: red;
}
/* 方法三：在这个父级盒子里面，末尾专门新建一个空的div，并设置一个clear清除属性
属性值：both 同时清除左右浮动
left 清除左浮动
right 清除右浮动
*/
/* .clear{
clear: both;
} */
/* 方法四;通过伪类::after清除浮动
/* 开启伪元素的 钥匙 key 必需写 */
/* content: ''; */
/* 伪元素是行内元素 变为块级属性 */
/* display: block; */
/* 清除浮动属性 */
/* clear: both; */
/* .wrap::after{
content: '';
display: block;
clear: both;
} */
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<!-- 专门新建一个空的div，为这个div添加一个clear清除属性 -->
<div class="clear"></div>
</div>
</body>
要約する
上記はエディターが作成した誰でも使えるフローティングレイアウトで、水平レイアウトを行う際にフローティングレイアウトを使用するメリット、フローティングレイアウトによって発生するよくある高さ崩れの問題とその解決策を紹介し、関連する事例と組み合わせてより詳しく解説しています。様々な資料を参考にしながら、私自身の理解も踏まえて作成しておりますが、誤字・脱字がございましたら、ご指摘・修正を賜りますよう、よろしくお願い申し上げます。