清除浮动方法? 解释 clear、overflow、after伪元素
时间: 2023-12-03 09:01:54 浏览: 142
.clear 万能清除浮动(clearfix:after)
清除浮动被用于解决父元素包含了浮动元素后,父元素高度塌陷的问题。下面是三种实现清除浮动的方法:
1. clear属性:清除浮动的元素使用该属性来设置自己的浮动方式,可以取值为left、right、both、none。当一个元素设置了clear属性后,它将会忽略前面浮动元素的影响。
2. overflow属性:设置父元素的overflow属性为auto或hidden,可以让父元素成为块级格式上下文,从而使得浮动元素的高度计入父元素的高度。
3. after伪元素:给父元素增加一个伪元素,然后为该伪元素设置clear属性,从而使其把前面的浮动元素清除掉。具体实现方式如下:
.parent::after {
content: "";
display: table;
clear: both;
}
以上三种方法均可实现清除浮动的效果,但应根据具体情况来选择使用哪种方法。
阅读全文