浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
1.浮动使用的方法
在CSS中，通过float属性来定义浮动，其基本语法格式为：选择器{float:属性值;}
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 <style type="text/css"> 8 #father{ 9 width: 700px; 10 height: 30px; 11 background: lightblue; 12 margin: 100px; 13 auto 0; 14 } 15 #son1{ 16 width: 500px; 17 height: 100%; 18 background: lightblue; 19 display: inline-block; 20 float: right; 21 22 } 23 #son2{ 24 width: 100px; 25 height: 100%; 26 background: lightgreen; 27 /*display: inline-block;*/ 28 /*float: left;*/ 29 30 } 31 </style> 32 33 </head> 34 <body> 35 36 <div id="father"> 37 <div id="son1"></div> 38 <div id="son2"></div> 39 </div> 40 </body> 41 </html>
浮动的目的就是为了让多个块级元素同一行上显示。
2.清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父级盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式为：选择器{clear:属性值;}
3.父级添加overflow属性方法
给父级添加： overflow为 hidden/auto|scroll 都可以实现。优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
