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

CSS浮动原理与清除方法

最新推荐文章于 2022-11-20 16:58:20 发布

weixin_30539835

最新推荐文章于 2022-11-20 16:58:20 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hxc555/p/6485109.html

本文详细介绍了CSS中float属性的工作原理及其如何使元素脱离文档流，并提供了六种常用的清除浮动的方法，帮助开发者更好地理解和应用浮动布局。

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>