解决高度塌陷的方法

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11     .box1{
12         width: 100px;
13         height: 100px;
14         background-color: antiquewhite;
15         float: left;
16     }
17     .box2{
18         width: 200px;
19         height: 200px;
20         background-color: pink;
21         /*
22         由于受到box1浮动的影响，box2整体向上移动100px
23         清除掉其他元素浮动时对当前元素产生的影响，这时可以使用clear来完成功能、
24         clear可以用来清除掉其他浮动元素对当前元素的影响
25         可选值
26         none 默认值，不清除浮动
27         left 清除左侧浮动元素对当前元素的影响
28         right 清除右侧浮动元素的影响
29         both 清除两侧浮动元素对当前元素的影响
30         清除浮动后，元素会回到其他浮动之前的位置
31         */
32        clear: left;
33        float: right;
34     }
35     .box3{
36         width: 300px;
37         height: 300px;
38         background-color: plum;
39         clear: both;
40     }
41     </style>
42        
43     </head>
44     <body>
45      <div class="box1"></div>
46      <div class="box2"></div>
47      <div class="box3"></div>
48     </body>
49 </html>

 

 

 


2.

解决高度塌陷方法：（基本没有副作用）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11     .box1{
12         border: 1px solid red;
13     }
14     .box2{
15         width: 100px;
16         height: 100px;
17         background-color: antiquewhite;
18         float: left;
19     }
20     .box3{
21         /*
22         可以直接在高度塌陷的父元素的最后，添加一个空白的div，
23         由于这个div并没有浮动，所以他是可以撑开父元素的高度的
24         然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度
25         基本没有副作用
26         使用这种方式虽然可以解决问题但是会在页面中添加多余的结构
27         */
28         clear: left;
29     }
30     </style>
31        
32     </head>
33     <body>
34      <div class="box1">
35      <div class="box2"></div>
36      <div class="box3"></div>
37      </div>
38     </body>
39 </html>

 

  

 3.高度塌陷最推荐的解决方法：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11         /*
12         通过after伪类，选中box1的后边
13         */
14       .box1{
15           border: 1px red solid;
16       }
17     .clearfix:after{
18         /*
19         添加一个伪类，将它转换为一个块元素
20         清除两侧的浮动
21         
22         解决高度塌陷方法：
23         可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
24         这样做和添加一个div的原理一样，是通过CSS来操作不是通过HTML来操作的，
25         可以达到同一个效果，而且不会在页面中添加多余的div,这是最推荐使用的方式，几乎没有副作用。
26         
27         在IE6中不支持after伪类，所以在IE6中还需要hasLayout来处理
28         */
29        content: "";
30        display: block;
31        clear: both;/* 清除影响最大的一方 */
32        .clearfix{
33            zoom: 1;
34        }
35     }
36     .box2{
37         width: 100px;
38         height: 100px;
39         background-color: antiquewhite;
40         float: left;
41     }
42     </style>
43        
44     </head>
45     <body>
46      <div class="box1 clearfix">
47      <div class="box2"></div>
48      </div>
49     </body>
50 </html>

 

posted @ 2019-07-18 23:59  zuiaimiusi  阅读(209)  评论(0)  编辑  收藏  举报