CSS世界--代码实践--清除浮动

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8         <title>CSS世界--代码实践--清除浮动</title>
 9         <style>
10             .clear:before {
11                 content: ''; 
12                 display: table; /*除了 table ，也可以是 block，或者是 list-item */
13             }
14             .clear:after {
15                 content: ''; 
16                 display: table; /*除了table，也可以是 block，或者是 list-item（这个兼容性不好，最好不用） */
17                 clear: both;
18                 visibility: hidden; font-size: 0; height: 0;
19             }
20         </style>
21     </head>
22 
23     <body>
24         <div class="clear" style="padding: 20px;background: red;">
25             <div style="float: left;width: 200px;height: 200px;background: yellowgreen;">我是浮动元素</div>
26         </div>
27     </body>
28 
29 <script>
30     
31 </script>
32 </html>

运行结果：

CSS世界--代码实践--清除浮动

 

我是浮动元素

 

posted @ 2021-01-15 09:39  噔噔噔噔噔噔噔  阅读(47)  评论(0)  编辑  收藏  举报