Solution height collapse

 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          a float : left ; 
16      } 
. 17      .box2 { 
18 is          width : 200px ; 
. 19          height : 200px ; 
20 is          background-Color : Pink ; 
21 is          / * 
22 is          due to the impact of the floating box1, box2 integrally moved upwardly 100px
 23 is          cleared when the influence of other elements of the current element generated by floating, then you can use the clear to completion,
 24          clear may be used to clear out the influence of other elements on the current floating element
25          optional value
 26 is          none default does not clear the float
 27          left clear on the left side of the floating elements on the current element
 28          right of eliminating the right side of the floating element
 29          both sides scavenging the floating element of the current element
 30          after the float clearance, element will return to the position before the other floating
 31 is          * / 
32         Clear : left ; 
33 is         a float : right ; 
34 is      } 
35      .box3 { 
36          width : 300px by ; 
37 [          height : 300px by ; 
38 is          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>

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

 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>

Solution height collapse

Guess you like