清除浮动的几种方式

1 清除浮动的几种方法

1.1 清除浮动的目的

• 浮动元素会脱离正常的文档流，导致其父容器无法正确计算高度，可能会导致容器塌陷或布局混乱。
• 清除浮动的目的是消除浮动元素对其他元素布局的影响，确保布局的稳定和一致性。

1.2清除浮动的常用方法

• 空的占位元素：可以在浮动元素后面添加一个空的 div 元素，并设置其样式为 clear: both;。这个空的元素会将其前面的浮动元素的影响清除掉。

  • .clearfix{
    	clear: both;
    }
    

• 使用 clearfix 类：可以在父容器上添加一个类，例如 .clearfix，并设置其样式为 overflow: auto; 或 overflow: hidden;。这样可以使父容器包含浮动元素并正确计算高度。

  • .clearfix{
    	/* 会出现滚动条 */
        /* overflow: scroll; */
        overflow: scroll;
    	/* 可能会出现滚动条 */
    	/* overflow: auto; */
    	overflow: hidden;
    }
    

• 伪元素清除浮动：可以使用伪元素 :after 在父容器的末尾添加一个清除浮动的元素。例如：.clearfix::after { content: ""; display: table; clear: both; }。

  • .clearfix{
    	/* 解决IE6-7 不认伪元素*/
    	zoom: 1;
    }
    .clearfix:after{
    	content: "";
    	display: block;
    	clear: both;
    }
    

• 使用clearfix库：还有一些第三方的CSS库，例如Bootstrap，提供了清除浮动的类，可以直接应用于父容器上。

1.3 注意事项

• 清除浮动应该应用于浮动元素的父容器，以确保正确地清除浮动的影响。
• 清除浮动的方法应该与浮动元素的布局需求和所在的上下文相匹配。
• 清除浮动可能会引入一些副作用，如增加额外的空间或滚动条，因此需要根据实际情况选择合适的方法。