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