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 width: 450px;
9 /*height: 210px;*/
10 border: 1px solid #000;
11 margin: 50px auto 0;
12 overflow: auto;
13 }
14
15 .box1{
16 width: 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>
