概述页面中浮动与清除浮动

<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
}

<section>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>

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