1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 450px; 9 /*height: 210px;*/ 10 border: 1px solid #000; 11 margin: 50px auto 0; 12 overflow: auto; 13 } 14 15 .box1{ 16 100px; 17 height: 100px; 18 float: left; 19 background-color: gold; 20 margin: 10px; 21 margin-bottom: 0px; 22 } 23 24 .box2{ 25 font-size: 14px; 26 color: #666; 27 margin: 10px; 28 line-height: 22px 29 30 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box"> 36 <div class="box1"></div> 37 <div class="box2">1、浮动元素有左浮动和有浮动两种 <br /> 38 2、浮动的元素会向左或向右浮动，碰到父元素边界或者其他元素才停下来 <br/ > 39 3、相邻浮动的块元素可以并在一行，超出父元素的宽度就换行 <br/ > 40 4、浮动让行内元素或者块元素自定转化成行内块元素（此时不会有行内块元素间隙问题）<br/ > 41 5、浮动元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动<br/ > 42 6、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果 <br/ ></div> 43 </div> 44 </body> 45 </html>