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>