利用元素浮动实现如下图的两栏布局：

HTML部分代码如下：

 1 <section> 2      <div class="wrap"> 3           <img src=""> 4           <p class="clearfix">......</p> 5      </div> 6      <div class="wrap"> 7           <img src=""> 8           <p class="clearfix">......</p> 9      </div>10 </section>

只要使img元素向左浮动，文字则移向右方并环绕图片。img浮动后脱离文档流，为使div包住img元素，在div中添加 overflow:hidden; 作用是强制父元素包住浮动的子元素。

常用的围住浮动元素的三种方法：

1. 为父元素添加 overflow:hidden;

2. 同时浮动父元素。则不管其子元素是否浮动，都将紧紧包住子元素

　section{boder:1px solid blue; float:left; width:100%} 指定宽度与其父元素(body)同宽

3. 添加非浮动的清除元素

　a. 添加<div id="clear"></div> 添加额外div用于清除

　b. 利用 :after伪类在元素最后添加一个最小内容 . (句点)，用于清除

CSS代码：

section {width:300px; border:1px solid red;}section .wrap {overflow: hidden;}img {float:left; margin-right: 10px;}p {margin-bottom:5px; overflow: hidden;}p .clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}

p元素中{overfloww: hidden;} 用于消除文字环绕图片，使文字内容始终位于图片右侧。

p元素中 .claer:after{.....} 目的是在p内容的最后添加一个 . ，这个句点用于清除浮动影响。 height: 0; visibility: hidden; 用于隐藏句点。