CSS-14-浮动

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             body{
 8                 margin: 0;
 9             }
10             /*浮动*/
11             /*浮动只有向左和向右浮动*/
12             /*浮动会让元素脱离文档流,后面不浮动的元素会占据原来的位置*/
13             /*浮动会让元素转换成行内块元素(让浮动的元素并列在一行)*/
14             /*当父级元素没有设置固定高度,子元素都浮动时,父级元素的高度就无法被撑开
15                    解决办法：
16                              给父级元素添加overflow:hidden*/
17             /*停止浮动:
18                   a.碰到父级元素的边界会停止
19                   b.碰到前面有浮动的元素也会停止
20                   c.碰到没有浮动的元素*/
21             /*清除浮动:
22                   a.clear:both(left,right);
23                   b.在父级元素添加属性overflow：hidden;
24                   c.使用成熟的清除浮动样式，clearfix
25                         .clearfix:after,.clearfix:before{content:'';display:table;}
26                         .clearfix:after{clear:both;}
27                         .clearfix{zoom:1;}*/
28              
29             
30             .float{
31                 width: 200px;
32                 height: 200px;
33                 background-color: yellowgreen;
34                 text-align: center;
35                 line-height: 200px;
36                 /*float: left;*/
37             }
38             .float1{
39                 width: 200px;
40                 height: 200px;
41                 background-color: yellow;
42                 text-align: center;
43                 line-height: 200px;
44                 float: right;
45             }
46             .clearfloat{
47                 zoom: 1;
48             }
49         </style>
50     </head>
51     <body>
52         <div class="float">
53             box1
54         </div>
55         <div class="float1">
56             box2
57         </div>
58         <div class="clearfloat">
59             
60         </div>
61     </body>
62 </html>