清除浮动的方式有哪些

本教程操作系统：windows10系统、DELL G3电脑。

在CSS中，清除浮动的方式主要有以下几种：

1. 使用clear属性：

这是最常用的清除浮动的方式。在浮动元素之后添加一个元素，并为其设置clear属性，以防止其与之前的浮动元素一起浮动。clear属性有四个值：left、right、both和none。left和right值分别用于清除左侧和右侧的浮动，both值用于清除两侧的浮动，none值则表示不进行清除。例如：

<div>浮动的元素</div>  <div></div>

1. 使用overflow属性：

通过为父元素设置overflow属性，可以使父元素的高度自动扩展以包含浮动的子元素。这种方式常与clearfix技巧一起使用。例如：

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

1. 使用BFC（Block Formatting Context）：

BFC是一种渲染机制，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。可以通过设置以下CSS属性开启BFC：

• overflow: 除了auto和scroll以外的任何值（例如，overflow:hidden）。
• opacity: 不为0的值。
• transform: 不为none的值。
• will-change: 任何值。
• -webkit-overflow-scrolling: touch以外的任何值。
• display: flow-root以外的任何值。
• new-box: 在创建新的box时（例如，使用flexbox或grid布局）。

1. 使用flex布局：

flex布局是一种现代的CSS布局方式，它可以自动处理元素的对齐、方向和顺序。在flex布局中，浮动元素会自动被清除，无需额外操作。例如：

.container {display: flex;}

1. 使用grid布局：

grid布局也是一种现代的CSS布局方式，它允许创建复杂的二维布局。在grid布局中，浮动元素会自动被清除，无需额外操作。例如：

.container {display: grid;}

1. 使用伪元素清除浮动：

这是一种常用的技巧，通过在父元素的伪元素上设置clear属性来清除浮动。例如：

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