清除浮动那些事儿----------------清除浮动的方法

float是网页布局中常会出现的属性，浮动。那么浮动的原理是什么呢？

原理：float会使元素脱离文档流，按照指定方向移动直到碰到父级的边界或者零蚊一个浮动元素为止。float的值有left/right/none，浮动可以使元素在一行显示，从而影响其他的布局。

清除浮动的6种方法：

  1. 使用伪元素: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空标签

 

 

posted @ 2017-03-01 16:58  超人会飞555  阅读(164)  评论(0)  编辑  收藏  举报