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>