解决高度塌陷的三个方法 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box1{
 8                 border: 5px solid palegoldenrod;
 9                 /*解决塌陷问题，法一*/
10                 overflow: hidden;
11             }
12             .box2{
13                 width: 100px;
14                 height: 100px;
15                 background-color: pink;
16                 float: left;
17             }
18             .box3{
19                 width: 100px;
20                 height: 100px;
21                 background-color: yellow;
22             }
23         </style>
24     </head>
25     <body>
26         <div class="box1">
27             <div class="box2"></div>
28         </div>
29         <div class="box3"></div>
30     </body>
31 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         
 7         <style type="text/css">
 8             .box1{
 9                 border: 5px solid palegoldenrod;
10                 /*解决塌陷问题，法二
11                  * 添加一个空白的div
12                  */
13             }
14             .box2{
15                 width: 100px;
16                 height: 100px;
17                 background-color: pink;
18                 float: left;
19             }
20             .clear{
21                 clear: both;
22             }
23         </style>
24         
25     </head>
26     <body>
27         <div class="box1">
28             <div class="box2"></div>
29             <div class="clear"></div>
30         </div>
31         
32     </body>
33 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box1{
 8                 border: 5px solid palegoldenrod;
 9             }
10             .box2{
11                 width: 100px;
12                 height: 100px;
13                 background-color: pink;
14                 float: left;
15             }
16             /*解决塌陷问题的第三个方法，使用css设置,z选中div块的最后*/
17             .clearfix:after{
18                 content: " ";/*设置一个空的内容*/
19                 /*转换成一个块元素*/
20                 display: block;
21                 /*清除浮动*/
22                 clear: both;
23             }
24         </style>
25     </head>
26     <body>
27         <div class="box1 clearfix">
28             <div class="box2"></div>
29         </div>
30     </body>
31 </html>

overflow，空的div，伪类after

posted @ 2019-11-02 16:11  大轩  阅读(244)  评论(0)    收藏  举报