浮动

 1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title></title>
 8     <style>
 9         /* 浮动的元素排列位置,跟上一个块级元素有关 
10                    ***
11                    (1) 如果上一个元素是标准流.则该浮动的顶部会和上一个 元素底部对齐
12                    (2) 如果上一个元素有浮动,则该浮动的元素顶部会和上一个元素底部对齐
13                    (3) 一个父盒子里面的子盒子如果需要一行对齐,只要其中一个子级有浮动
14                    ,那么其他子级都需要浮动,这样才能一行对齐显示
15                    总结:
16                       浮动的目的就是为了让多个块级元素能在同一行上显示
17                       (2) 元素添加浮动后,元素会具有行内块级标签的特性.元素的
18                       高度玩去哪取决于定义的宽高或者默认的内容多少
19                       加了浮动的元素盒子是浮起来的,漂浮在其它的标准盒子上面
20                       加了浮动的盒子,不占位置的,它浮起来了,它原来的位置漏给了标准的盒子
21                       
22                   */
23         
24         .father {
25             width: 600px;
26             height: 600px;
27             background: brown;
28             margin: 20px;
29         }
30         
31         .son1 {
32             width: 200px;
33             height: 200px;
34             background-color: cadetblue;
35             /* float: left; */
36         }
37         
38         .son2 {
39             width: 200px;
40             height: 200px;
41             background-color: azure;
42             /* float: left; */
43             /* float: right; */
44         }
45     </style>
46 </head>
47 
48 <body>
49     <div class="father">
50         <div class="son1">大儿子</div>
51         <div class="son2">小儿子</div>
52     </div>
53 </body>
54 
55 </html>