CSSでfloatをクリアする方法

CSSでfloatをクリアする方法は、親要素に[overflow:auto]を設定することです。設定すると、コンテンツ要素がトリミングされ、残りの要素は表示されなくなります。空のタグを追加するか、[:after] 疑似要素を使用して、float をクリアすることもできます。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

まず、フロートをクリアする目的について話しましょう。フロートのクリアは、それ自身のフロートをクリアする効果ではなく、フロートが接触するフローティング要素のフロートをクリアして、その背後の要素が消去される効果です。フローティング要素はそれらを受け入れず、フローティング要素は通常の要素の流れに従ってレイアウトされます。

float をクリアする 3 つの方法を紹介しましょう:

最初の方法:

空のタグを追加します (div または br などで十分です))。 clear:both ステートメントを通じて後続の要素に float を適用します。

<div class="main_left">.main{float:left;}</div>
<div class="side_left">.side{float:right;}</div>
<!--增加一个空标签-->
<div style="clear:both;"></div>
<div class="footer">.footer</div>

短所: 意味のないタグを多数追加する必要があるため、後のメンテナンスに悪影響を及ぼします。小さなプログラムであれば問題ありませんが、大規模なプロジェクトの場合は注意して使用してください。

2 番目の方法: 使用: 疑似要素の後で

.clearIt { zoom:1; }
.clearIt:before;  
 /*加上before可以防止浏览器顶部的空白崩溃（就是上一个div的margin-bottom和下边的margin-top会发生叠加）*/
 .clearIt:after {
    content:".";
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; 
}
/*
display:block 使生成的元素以块级元素显示,占满剩余空间;
height:0 避免生成内容破坏原有布局的高度。
visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
zoom：1 触发IE hasLayout。
*/

3 番目の方法:

親要素の後にオーバーフロー: auto

<!--为父元素设置overflow-->
<div class="wrap"  style="overflow:auto;">
<div class="wrap_main_left">.main{float:left;}</div>
<div class="wrap_side_left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

を設定します。要素が overflow:auto で設定されている場合、コンテンツ要素はトリミングされ、要素を越えて表示されなくなります。

この方法の利点は、構造上および意味上の問題がなく、コードの量が非常に少ないことです。しかし、欠点も非常に大きく、コンテンツが増えると自動的に折り返されないためコンテンツが非表示になりやすく、オーバーフローする必要がある要素が表示できません。

実際には、明らかなことだけです。両方とも浮動小数点の影響を排除するために使用されます。他のいくつかのメソッドは、コンテンツを非表示にすることで独自の目的を達成します。

関連する学習ビデオの共有:

css ビデオ チュートリアル

以上がCSSでfloatをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。