@浮动介绍-优快云博客

本文链接：https://blog.youkuaiyun.com/KB241028/article/details/127779077

本文介绍了浮动的概念，即在非IE浏览器中，当元素设置浮动后可能导致父元素高度塌陷的问题。接着阐述了清除浮动的重要性，因为不处理浮动会影响父元素及其后续元素的布局。文章列举并详细解释了四种常见的清除浮动的方法：额外标签法、设置父元素`overflow:hidden`、使用`:after`伪元素以及使用`:before`和`:after`双伪元素。这些方法各有优缺点，适用于不同的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、什么是浮动？

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。

二、为什么要清除浮动？

如果父元素不设置高度情况下，高度由子元素撑开，一旦子元素设置浮动，父元素会失去高度进而影响后面元素布局；

三.清除浮动的常用方法

方法一：额外标签法

给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。

方法二：父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

代码如下（示例）：

 #parent{
    overflow: hidden;
}

方法三：使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

代码如下（示例）：

  #parent:after{
 content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
#parent{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

方法四：使用before和after双伪元素清除浮动

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

代码如下（示例）：

#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
    clear: both;
}
#parent{
    *zoom: 1;
}

文章转载自：添加链接描述