HTMLフロートとクリアフロートの詳しい説明

<img src= “ ” />
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>

　　P {margin: 0; border: solid 1px;}
　　img {float: left;}

　　P {margin: 0; border: solid 1px; width: 200px; float: left;}
　　img {float: left;}

<section>
<img src=" />
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>

section , footer {border: solid 1px;}
img {float: left;}

　　section {border: solid 1px; float: left; width:100%}
　　footer {border: solid 1px; clear: left}
　　img {float: left;}

.clearfix: after {
　　content: "";
　　display: block ;
　　height: 0
　　visibility: hidden;
　　clear : both
}