浮动

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。另外，在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧，从而可以实现文字环绕的效果，类似于Word中图文混排。

⚠️注意：浮动属性仅对非绝对定位的元素有效，跟随浮动元素的文本或行内元素将围绕在浮动元素的另一侧，例如向左浮动的话其它元素将围绕在浮动元素的右侧。

另外，在使用float属性时还需要注意以下几点：

• 如果设置了float属性且属性的值不为none时，若display属性的值为inline-table，那么display实际会被设置为table；若display的属性值为inline、inline-block、run-in、table-*等值，那么display实际会被设置为block，其它情况则没有变化
• 当元素设置了绝对定位或者display属性的值为none时，float属性无效
• 相邻的浮动元素，如果空间足够它们会紧挨在一起，拍成一行。

清除浮动

元素浮动之后，会对周围的元素造成一定的影响(自身高度为0了)，为了消除这种影响，你可以使用clear属性来清除浮动，属性的可选值如下：

第二种：使用伪元素

.cli::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}