http://www.w3cplus.com/css/clear-float
1.浮动实现图文环绕（理解难点）
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框,因此，创建浮动框可以使文本围绕图像
文本围绕图片源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动之文本围绕图片</title>
<style>
.box img {
width: 80px;
border: 1px dashed #f50447;
float: left;
}
.box p {
background-color: #00BFFF;
}
</style>
</head>
<body>
<div class="box">
<img src="img/photo.jpg"/>
<p>在今天，有不懂的知识，我们都会上网搜一下，但这只是最简单的搜索方法，属于搜索的初级阶段。那搜索的高级阶段是什么呢？最近，科学作家万维钢在新书《智识分子》里介绍了一个概念，叫“信息极客”，他们不仅在网上查找信息，而且还想为社会创造价值，甚至想用信息左右公共政策。想要成为这样的人，你就要会三个高级功夫。
第一个功夫，是阅读学术论文。<br/>
第二个功夫，是直接阅读原始数据。<br/>
第三个功夫，是主动采集和分析数据。那些大数据咱们采集不了，可以从自己的数据开始，也就是量化自我。<br>
</p>
</div>
</body>
</html>
2.清除浮动造成影响源代码（浮动是带有方向的inline-block行内联块级元素/包裹性/破坏性）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>深入学习浮动浮动清除</title>
<style>
body, img, ul, li,p {
margin: 0;
padding: 0;
}
.ul-li {
background-color: deeppink;
border: 1px dashed deepskyblue;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
.ul-li li{
/*display: inline-block;*/
float: left;
}
.ul-li li img {
width: 80px;
border: 1px dashed #f50447;
}
.float {
float: left;
}
.p_title {
font-family: "微软雅黑";
font-size: 14px;
line-height: 16px;
color: #fff;
text-align: center;
}
.bg_2 {
background-color: #00BFFF;
} /*清除浮动clearfix*/
.clearfix:after {
display: block;
content: "clear";
line-height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<ul class="ul-li clearfix">
<li><img src="img/photo.jpg"/><p class="p_title">海盗船_1</p></li>
<li><img src="img/photo.jpg"/><p class="p_title">海盗船_2</p></li>
<li class="bg_2"><img src="img/photo.jpg"/><p class="p_title">海盗船_3</p></li>
<li><img src="img/photo.jpg"/><p class="p_title">海盗船_4</p></li>
</ul>
</div>
</body>
</html>