今回は CSS の Float 屬性について詳しく説明します。 CSS で Float 屬性を使用する際の 注意點(diǎn) について、実際のケースを見(jiàn)てみましょう。

1. Floatの機(jī)能

1. 畫像の周りにテキストを適用します

3. フローティングの幅と高さ

要素は Adapt をカスタマイズできますが、その値は設(shè)定できます。

2. 主要な解決済みの問(wèn)題

畫像を囲むテキスト: img label が複數(shù)のテキスト ラベルを持つコンテナーに配置されます。img がフローティングの場(chǎng)合、テキスト ラベルが畫像を囲みます。

<img src="../img/a.jpg" style=" width: 100px; height: 200px; float: left;" alt="">
????????<p>001文件內(nèi)容文件內(nèi)容文內(nèi)容文件內(nèi)容<br/>
????????文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)內(nèi)容文件內(nèi)容<br/>
????????文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容<br/>?
????????文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文內(nèi)容文件內(nèi)容文件內(nèi)容<br/>
????????<p>p標(biāo)簽文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文容文件內(nèi)容文件內(nèi)容文件內(nèi)容</p>
????????<p>p標(biāo)簽文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容</p>
????????文件內(nèi)容文件內(nèi)容文件內(nèi)容文件件內(nèi)容文件內(nèi)容文件內(nèi)容<br/>
????????文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容<br/>?
????????文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)內(nèi)容文件內(nèi)容<br/>
????????文件內(nèi)容文件內(nèi)容文件內(nèi)容文件容文件內(nèi)容文件內(nèi)容<br/>
????????文件內(nèi)容文件內(nèi)容文件內(nèi)容文件容文件內(nèi)容文件內(nèi)容<br/>
????????</p>

2.1 これが問(wèn)題です

浮動(dòng)要素は通常要素に隣接しており、浮動(dòng)要素と通常要素の間に

明確な浮動(dòng)要素がありません。このとき、通常要素は、フローティング要素で覆われていますが、コンテンツはフローティング要素の周囲に表示されます。

<p style="width: 100px; height: 200px; background: red;float: left;" >001</p>?
<p style="width: 100px; height: 200px; background: gray;float: none;" ><p>002</p></p>

001はフロート、002はフロートしませんが、002の要素自體は001で覆われていますが、內(nèi)容は001の周囲に表示されます。

3. 非コアおよびメインアプリケーション領(lǐng)域

列のレイアウト: 最初にブロックを水平に配置し、その後、余分な部分に対して新しい行を開始します。 主な機(jī)能

1. 親の高さの崩壊 (これも深刻な問(wèn)題です)

2. 幅と高さはアダプティブ子要素になりますが、幅と高さの設(shè)定は有効です

2. 高さの崩壊の問(wèn)題を解決します

まず第一に、BFC と IFC の 2 つの基本概念を理解する必要があります。これらはブラウザーのレンダリングと密接に関係しているからです。

1.BFC (ブロックレベルの書式設(shè)定コンテキスト)

これは、領(lǐng)域の內(nèi)部のレイアウト方法を規(guī)定する、獨(dú)立してレンダリングされる領(lǐng)域であり、主なルールは次のとおりです:

1.1 內(nèi)部ボックスを縦に並べて配置します

1.2 ボックスの縦方向の距離はマージンで決まります同じBFCに屬する2つの隣接するボックスのマージンが重なります

1.3 BFCエリアfloat

.wrap{
???????????background:red;?
???????????padding:10px;
???????????width:auto;
????????}
????????.left{
????????????background:gray;
????????????width:200px;
????????????height:100px;
????????????float:left;
????????}
????????.right{
????????????background:yellow;
????????????width:100px;
????????????height:100px;
????????????float:left;
????????}

<p class="wrap">
????????<p class="left">left</p>
????????<p class="right">right</p>
</p>

.head と .wrap とは重なりません。2 つのボックスの間には上下に 20 ピクセルのマージンがありますが、

.head と .left の間では重なり、.head には 20 ピクセルのマージンがあります。 、.left には 10px のマージンがあり、マージンはありません。 .wrap によって BFC(overflow:hidden) が作成されるため、オーバーラップが発生します。

1.4 各ボックスの左マージンは、それを含む境界ボックスの左側(cè) (右側(cè)と同じ) に接しており、フロートにも同じことが當(dāng)てはまります

2 IFC (行レベルの書式設(shè)定コンテキスト)

ボックスの開始入っているブロックの上から1つずつ水平に配置します。水平マージン、ボーダー、パディングが占めるスペースはすべてまとめられます (表示はインライン、インラインブロックです。インライン特性を持つ要素には次の特性があります)。ルールは以下の通りです:

2.1 幅と高さは指定できません

2.2 垂直方向のマージン、パディング、ボーダーは無(wú)効です

2.3 ラインボックスの左側(cè)が、それを含むボックスの左側(cè)に近いブロックであり、ライン ボックスの右側(cè)がそのブロックを含むボックスの右側(cè)に近く、フローティング ブロックを含むブロックの端とライン ボックスの間に挿入できます。

2.4 インラインボックスの高さは

line-height

によって決定されます。

このセクションの例については、表示の章のインライン要素を參照してください。

3. 解決策

主要根據(jù)BFC的原理實(shí)現(xiàn)，因?yàn)锽FC的渲染的是整塊區(qū)域，也就會(huì)計(jì)算出寬、高。這也是傳說(shuō)中的清除浮動(dòng)的方案

3.1 父容器創(chuàng)建BFC方法

3.1.1 創(chuàng)建BFC的方法

a) Float除了none以外的取值；

b) Overflow除了visible以外的值；

c) Display值為table-cell、table-caption、inline-block、flex、inline-flex等

d) Position值為absloute、fixed

e) Fieldset元素

3.1.2 清除浮動(dòng)

a) Float、overflow、display三種方式都可以清除浮動(dòng)，但position、fieldset雖然創(chuàng)建了bfc但不可以清除浮動(dòng)（也就是不能解決高度塌陷的問(wèn)題）。主要原因?yàn)椋簆osition、fieldset都需要子元素來(lái)?yè)伍_父容器的高度，但子元素浮動(dòng)后又不存在高度，所以失效。

b) Float、overflow、display示例代碼:

.wrap{
????????????background:?gray;
????????????padding:?10px;
????????????overflow:?auto;
????????}
????????.left,?.right{
????????????background:?red;
????????????float:?left;
????????????width:?200px;
????????????height:?100px;
????????}
????????.right{
????????????background:?yellow;
????????}
????????.footer{
????????????background:?pink;
????????}

<p class="wrap" >
????????<p class="left">left</p>
????????<p class="right">right</p>
????</p>
<p class="footer">footer</p>

3.1.3 最后一個(gè)子元素clear:both

利用clear:both觸發(fā)父容器重新計(jì)算高度的原理實(shí)現(xiàn)，示例代碼如下：

.wrap{
????????????background:?gray;
????????????padding:?10px;?
????????}
????????.left,?.right{
????????????background:?red;
????????????float:?left;
????????????width:?200px;
????????????height:?100px;
????????}
????????.right{
????????????background:?yellow;
????????}
????????.footer{
????????????background:?pink;
????????}
????????.clear{
????????????clear:?both;
????????????zoom:?1;
????????}

<p class="wrap" >
????????<p class="left">left</p>
????????<p class="right">right</p>
????????<p class="clear"></p>
????</p>
<p class="footer">footer</p>

3.1.4 After添加最后一個(gè)子元素

利用css的:after偽元素實(shí)現(xiàn)，動(dòng)態(tài)插入元素并清除浮動(dòng)：

.wrap{
????????????background:?gray;
????????????padding:?10px;?
????????}
????????.wrap:after{
????????????content:?'';
????????????display:?block;
????????????overflow:?hidden;
????????????clear:?both;
????????}
????????.left,?.right{
????????????background:?red;
????????????float:?left;
????????????width:?200px;
????????????height:?100px;
????????}
????????.right{
????????????background:?yellow;
????????}
????????.footer{
????????????background:?pink;
????????}

<p class="wrap" >
????????<p class="left">left</p>
????????<p class="right">right</p>?
????</p>
<p class="footer">footer</p>

4. 總結(jié)

1. 利用bfc方式清除浮動(dòng)，簡(jiǎn)單、瀏覽器支持良好，但在IE6-版本支持存在問(wèn)題。但是存在以下局限性，要適環(huán)境而用：

??? a) Overflow方式：滾動(dòng)條會(huì)被隱藏，如果子內(nèi)容超高則存在顯示不全的問(wèn)題；

??? b) Float方式：讓父容器浮動(dòng)，那么就存在對(duì)父容器同輩元素的影響；

??? c) Dipslay方式：讓父容器變?yōu)閠able或者flex等，都存在不明確的影響，大家都不推薦使用。

2. 最佳解決方案：利用:after添加一個(gè)偽元素并給予clear:both和zoom:1來(lái)實(shí)現(xiàn)清除浮動(dòng)，兼容性好，對(duì)環(huán)境影響最小。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

CSS實(shí)現(xiàn)3D按鈕效果

opacity透明度濾鏡的IE兼容解決方法

水平垂直居中的方法

以上がCSSのFloat屬性について詳しく解説の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。