摘要：
部分>；divclass=“wrap”>；pclass=“clearfix”>；10<；/部分>；向div添加溢出：float:100%}。指定的宽度与其父元素（body）相同。3.添加非浮动清理元素a.添加<；divide=“清除”>；&书信电报；节｛width:300px；｝img｛float:left；
利用元素浮动实现如下图的两栏布局：
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; 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; 用于隐藏句点。