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

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}

overflow:auto;}

注: overflow:auto; 、overflow:hidden;はすべてOKです

.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