clear-fix清除浮动的写法有哪些

清除浮动是为了解决父元素因为子元素浮动而导致高度塌陷的问题。以下是几种常用的清除浮动的写法：

1. 使用空的clear-fix元素：

.clearfix::after{
content:"";
display:table;
clear:both;
}

然后在包含浮动元素的父元素上添加.clearfix类。

2. 使用overflow属性：

.parent{
overflow:auto;
}

这会触发BFC（块级格式化上下文），从而自动清除浮动。

3. 使用clearfix类选择器：

.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;/*兼容IE*/
}

然后在包含浮动元素的父元素上添加.clearfix类。

这些方法中，第一种和第三种方式使用伪元素来插入一个空元素，通过设置clear: both将其放置在浮动元素之后，从而清除浮动。第二种方法利用overflow属性来创建一个新的块级格式化上下文，它会包裹住浮动元素并自动清除浮动。根据具体情况，选择其中一种方式即可。