CSS スタイル - 要素のフロートをクリアするには?

フロートをクリアする問題は、フロントエンドの人にはよく知られているはずです

1.クリア:両方を使用してフロートをクリアします

。

例1: p
htmlコードの使用	CSSコード
< ;p class="box">	.box{ width:300px;margin:0 auto;border:10px Solid #000;} .p{ width:200px;height:200px;background:red ;float:left;} .clear{ height:0px;font-size:0;clear:both;overflow: hidden;}
例2:使用
	.box{ width:300px;margin:0 auto;border:10px Solid #000;} .p{ width:200px;height: 200px;background:red;float:left;}
例3：伪类对象::after+zoom:1(推荐使用)
	。 box{margin:0 auto;border:10px Solid #000;} .p{ width:200px;height:200px;background:red;float:left;} .clear{zoom:1; } .clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.オーバーフロー属性を使用する

3.display属性

htmlコード	css コード
	.box{ width:300px;border:1px Solid #000 ; overflow:auto;} .p1{ width:260px;height:400px;background:Red;float:left;} 注: overflow:auto; 、overflow:hidden;はすべてOKです

htmlコードを使用する

cssコード

.box{ width:300px;margin:0 auto;border :10px Solid #000; display:inline-block;}

.p{ width:200px;height:200px;background:red;float:left;}

注: 親要素を水平方向に中央揃えにすることはできません親要素は text-align:center を使用して問題を解決します

4.親要素 float

html code	csscode
	.box{ width:300px;margin:0 auto;border:10px Solid # 000; float:left;} .p{ width:200px;height:200px;background:red;float:left;} 注: 親要素を水平方向に中央揃えにすることはできません。解決してください 位置: 相対; 左: 50%; マージン左: -150px;

以上がCSS スタイル - 要素のフロートをクリアするには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。