问题描述：
在文档流中，父元素默认被子元素撑开（父多高子多高），一旦子浮动，脱离文档流，父无撑起元素便塌陷，父下的所有元素会上移。
（不推荐）可以将父高度写死避免塌陷，但高度写死后，父高度不能自动适应子高度的变化。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>高度塌陷问题</title> 6 <style type="text/css"> 7 .father{ 8 border: 1px solid red; 9 } 10 .son{ 11 width: 100px; 12 height: 100px; 13 background-color: greenyellow; 14 float: left; 15 /*设置浮动后由于子脱离文档流父子后重叠*/ 16 } 17 .duiBi{ 18 width: 1000px; 19 height: 100px; 20 background-color: pink; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="father"> 26 <div class="son"> 27 </div> 28 </div> 29 <div class="duiBi"> 30 </div> 31 </body> 32 </html>
解决方案一：