浮动：图片文字两栏布局

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

HTML部分代码如下：

<section>
     <div class="wrap">
          <img src="">
          <p class="clearfix">......</p>
     </div>
     <div class="wrap">
          <img src="">
          <p class="clearfix">......</p>
     </div>
</section>

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

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

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

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

　section{boder:1px solid blue; float:left; 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; 用于隐藏句点。