浮动 及清除浮动

一、什么是浮动？

1.定义

浮动（float）是一种CSS属性，用于控制元素在页面上的布局位置。当元素设置为浮动时，它会脱离正常的文档流，并向左或向右移动，直到遇到其父元素或其他浮动元素的边缘为止。

2.作用

浮动元素通常用于创建多列布局，使元素能够在文本或其他内容周围浮动。

常用于图片，可以实现文字环绕图片

浮动元素会影响其他元素的布局，尤其是当它们位于浮动元素之后时，可能会导致其他元素紧跟其后或覆盖其内容。

3.属性设置

浮动元素可以使用CSS的float属性来设置，可以将其值设置为left（向左浮动）或right（向右浮动），也可以设置为none（取消浮动）。还可以使用clear属性来控制元素如何与浮动元素互动，在元素前面插入一个空的元素以清除浮动效果。

4.特点

浮动的特点是脱离文档流，可能会造成父元素外边距塌陷。

二、清除浮动的方法

清除浮动是为了解决浮动元素造成的父元素高度塌陷的问题。

1、使用clearfix类：

在父元素上添加一个clearfix类，可以通过给clearfix类设置以下样式来清除浮动：

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

原理：在这个方法中，我们在容器内添加一个空元素，并使用 CSS 的 :after 伪类来为其添加一个空内容。然后，我们设置 display: block; 和 clear: both;，以清除浮动。 

2、使用overflow属性：

在父元素上添加overflow属性，并设置值为hidden、auto或scroll，可以触发BFC（块级格式化上下文），从而清除浮动：

.parent {
  overflow: hidden;
}

注意：使用 overflow 属性清除浮动可能会影响容器的滚动条。

使用overflow属性不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用。

原理：我们通过设置容器的 overflow 属性为 hidden，触发了容器的 BFC（块级格式化上下文），从而清除了内部的浮动元素。

3、使用伪元素清除浮动：

在父元素的最后一个子元素后添加一个伪元素，通过清除浮动来解决父元素高度塌陷的问题：

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

注意：伪元素清除浮动 不会新增标签，不会有其他影响。 

4、使用空div清除浮动：

在浮动元素的父容器内部添加一个空的div，并给它设置clear属性：

注意：使用空元素清除浮动需要添加额外的 HTML 元素。

清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用。

5、使用Flexbox布局：

将浮动元素的父容器设置为display: flex，可以自动清除浮动的影响：

.parent {
    display: flex;
}