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>