如何清除浮动的副作用

浮动是指当一个元素包含浮动元素时，该元素的高度无法自适应浮动元素的高度，导致布局出现异常的现象。为了清除浮动的副作用，可以采取以下几种方法：

1.使用清除浮动技术：在浮动元素的父元素中添加clear属性，使其清除浮动。例如：

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

在父元素中添加 clearfix 类即可清除浮动。

2.使用伪元素技术：在浮动元素的父元素中使用伪元素，清除浮动。例如：

.parent::after {
    content: "";
    display: block;
    clear: both;
}

在父元素中添加 ::after 伪元素即可清除浮动。

3.使用overflow属性：在浮动元素的父元素中添加overflow属性，使其自适应浮动元素的高度。例如：

.parent {
    overflow: hidden;
}

在父元素中添加 overflow: hidden 属性即可自适应浮动元素的高度。

4.使用display属性：在浮动元素的父元素中使用display属性，使其自适应浮动元素的高度。例如：

.parent {
    display: inline-block;
}

在父元素中添加 display: inline-block 属性即可自适应浮动元素的高度。

综上所述，以上四种方法都可以清除浮动的副作用，具体选择哪种方法取决于实际情况。