1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box{ 8 width: 400px; 9 border: 1px solid black; 10 overflow:hidden; <主盒子要消除浮动给否则包不住里面的内荣> 11 } 12 .let{ 13 float: left; 14 background-color: red; 15 } 16 .right{ 17 float: right; 18 background-color: blue; 19 } 20 h2{ 21 float: left; <要使得h2不盛满一行就得给h2加一个浮动> 22 margin: 0; 23 height: 30px; 24 } 25 </style> 26 <!-- 27 解决方案：float: left; 28 --> 29 </head> 30 <body> 31 <div class="box"> 32 <div class="let"> 33 <h2>左边</h2> 34 35 </div> 36 <div class="right"> 37 <h2>右边</h2> 38 </div> 39 40 </div> 41 </body> 42 </html>