关于清除浮动的方法

Posted 2023-04-26

参考技术A

刚学习了浮动，这里整理一下清除浮动的方法。

伪元素清除浮动是伪元素的用途之一，这是清除浮动的一个相对比较好的方法，可以减少无意义的标签，使得html尽量简单。可以在浮动元素的容器内增加一个class类，比如说取名为clearfix。然后在clearfix里面添加一个伪元素，只能用after，利用这个看不见的元素来清除浮动。这里要注意的一点伪元素生成的默认是行内元素，而是clear的对象一定是块级元素，否则不起作用，所以要设置一下display属性。

在伪元素里面设置display属性为table，也是比较优越的方法。

不用伪元素，直接在父容器里面 display: table; 来模拟表格布局，也可以清除浮动，并且实现自动对齐。当然表格元素也会有它的弊端。

给浮动元素的父容器添加 overflow:hidden; 或 overflow:auto; 或者 overflow: scroll; ，也可以清除浮动。

在浮动的元素后面（同一层级），增加一个新标签，比如： <div class="clear"></div> ，然后在这个空元素里面设置 clear: both 清除浮动。当然这样的话，就会增加无用的标签，使得html变得冗余。

给浮动元素的父容器也设置浮动，也能达到清除浮动的效果。但它会给下面的元素带来布局的影响。

当浮动元素 同一层级 的后面还有元素的时候，可以给后面的元素设置清除浮动，来达到为上面的元素清除浮动的效果。

给父容器设置 display: inline-block 之后，容器就可以形成BFC，这样就会有独立的渲染空间，就算有浮动元素也会把容器撑开。

总结：

关于浮动与清除浮动

• time: 2016-02-23 21:00
• tags: css

---

在css布局中常用的一个属性就是float，它可以让div块脱离原本的文档流向左或向右浮动，但是...这个浮动有时候很烦，需要清除浮动，下面详细整理一下关于浮动，为什么要清除浮动和怎样清除浮动。

一. float

float浮动样式没有靠中（浮动居中）的样式，在css布局中如果需要让标签对象居中需要margin等其它方法（先偷懒下次整理(●°u°●)? ），这里记住浮动靠右使用float:right，浮动靠左使用float:left样式即可。例子到下面一起举。

二.为什么要清除浮动？

div嵌套式子元素浮动而父元素未浮动

后果：因为float会脱离文档流，这样就导致了父元素的height为0.

此时父元素div的height变为0，只显示了3px的边框：

三.如何清除浮动？

（第一类）：在元素末尾添加一个内容带有clear：both属性的空元素

1.方法一：使用带clear属性的空元素

在在浮动元素的下面加了一个clear：both；的属性，然后浮动被清除，父元素的高度被自动填充了：

2.方法二：使用CSS的:after伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。需要注意的是为了IE6和IE7浏览器，要添加一条zoom:1;触发haslayout。

(第二类)：触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素

3.方法三：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

4.方法四：给浮动的元素的容器添加浮动(但是这样会使其整体浮动，影响布局，不推荐使用. )

显示结果与方法三相同就不再列出。

四.后记

网上推荐说在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。回顾一下洗洗睡觉(●°u°●)? 」