伪类清除浮动 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .clear{
 8                 zoom: 1;/*兼容IE浏览器，让标签清浮动*/
 9             }
10             .clear:after{
11                 content: '';
12                 display: block;
13                 clear: both;
14                 height: 0;
15                 visibility: hidden;
16             }
17         
18         
19             .box{
20                 background: yellow;
21             }
22             
23             .box1{
24                 width: 50%;
25                 height: 200px;
26                 background: red;
27             }
28             .box2{
29                 width: 30%;
30                 height: 350px;
31                 background: darkcyan;
32             }
33             .box div{
34                 float: left;
35             }
36         </style>
37     </head>
38     <body>
39         
40         <div class="box clear">
41             
42             <div class="box1"></div>
43             <div class="box2"></div>
44             
45         </div>
46         
47         
48     </body>
49 </html>

 

posted @ 2017-09-15 14:30  铜镜123  阅读(296)  评论(0)    收藏  举报