Top

CSS3 float深入理解浮动资料整理

CSS浮动(float,clear)通俗讲解

CSS 浮动

CSS float浮动的深入研究、详解及拓展(一) 

CSS float浮动的深入研究、详解及拓展(二)

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>
View Code

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>
View Code

 

posted @ 2016-10-26 20:55  Avenstar  阅读(242)  评论(0)  编辑  收藏  举报