清除浮动的4种方式

article/2025/9/17 2:24:20

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
如下:
给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。
在这里插入图片描述
当我给内部两个盒子加上float属性的时候
底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了

清除浮动的方法（最常用的4种）

一、额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签。
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

<div class="fahter"><div class="big">big</div><div class="small">small</div><div class="clear">额外标签法</div>
</div>

.clear{clear:both;}

二、父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点： 简单、代码少、浏览器支持好

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

.fahter{width: 400px;border: 1px solid deeppink;overflow: hidden;
}

注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持：after，使用zoom：1
在这里插入图片描述

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content: "";display: block;height: 0;clear:both;visibility: hidden;}.clearfix{*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}<body><div class="father clearfix"><div class="big">big</div><div class="small">small</div><!--<div class="clear">额外标签法</div>--></div><div class="footer"></div>
</body>

四、使用before和after双伪元素清除浮动：（较常用推荐）
在这里插入图片描述

<style>.father{border: 1px solid black;*zoom: 1;}.clearfix:after,.clearfix:before{content: "";display: block;clear: both;}.big ,.small{width: 200px;height: 200px;float: left;}.big{background-color: red;}.small{background-color: blue;}</style><div class="father clearfix"><div class="big">big</div><div class="small">small</div></div><div class="footer"></div></div>