float是网页布局中常会出现的属性，浮动。那么浮动的原理是什么呢？
原理：float会使元素脱离文档流，按照指定方向移动直到碰到父级的边界或者零蚊一个浮动元素为止。float的值有left/right/none，浮动可以使元素在一行显示，从而影响其他的布局。
清除浮动的6种方法：
- 使用伪元素:after;给浮动元素的父级添加:after,相当于在元素末尾添加一个看不见的父元素来清除浮动。(推荐用法)eg:
1 <style> 2 .clearfix:after{ 3 content:""; 4 display:block; 5 clear:both; 6 } 7 /*IE6和IE7下不支持after伪元素，为了兼容IE6、7使用zoom*/ 8 .clearfix{ 9 zoom:1; 10 } 11 12 .div1{ 13 width:300px; 14 height:300px; 15 float:left; 16 border:1px solid #000000; 17 } 18 19 20 </style> 21 </head> 22 <body> 23 24 <div class="clearfix"> 25 <div class="div1"></div> 26 </div> 27 28 </body>
2.在浮动元素下添加空标签
3.给浮动元素父级添加overflow：hidden或overflow：auto
4.给浮动元素父级加display：inline-block
5.在浮动元素下加br空标签