高度塌陷问题

 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         /*
13         没有设置宽高，则宽继承父元素，高由内容决定
14         */
15         border: 10px red solid;
16     }
17     .box2{
18         width: 100px;
19         height: 100px;
20         background-color: blue;
21         /*
22         在文档流中，父元素的高度默认是子元素撑开的
23         也就是子元素多高，父元素多高
24         
25         为子元素设置向左浮动
26         但是当为子元素设置浮动以后，子元素会完全脱离文档流
27         此时会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
28         由于父元素的高度塌陷，则父元素下所有元素都会向上移动，这样导致页面布局混乱
29         所以在开发中要避免出现高度塌陷
30         
31         可以将父元素的高度写死，以避免塌陷问题，但是父元素的高度将不能自动适应子元素的高度
32         所以这种方案是不推荐的
33         */
34        float: left;
35     }
36     </style>
37        
38     </head>
39     <body>
40      <div class="box1">
41          <div class="box2"></div>
42      </div>
43     </body>
44 </html>