html清除浮动的6种方法示例

当html页面中有浮动元素时，可能会出现一些布局上的问题，比如父元素无法自适应高度，子元素位置错乱等，这时候需要使用清除浮动的方法来解决这些问题。本文将介绍6种常用的清除浮动的方法。下面将分别进行介绍：

1. 在父元素末尾添加空标签

这是一种比较简单的清除浮动的方法。在父元素的末尾添加一个空的标签，如下所示：

<div class="parent">
  <div class="float-left">浮动元素1</div>
  <div class="float-right">浮动元素2</div>
  <div style="clear:both;"></div>
</div>

上述代码中，在父元素.parent的末尾添加了一个空的<div>标签，并且给它加上clear:both的样式来清除浮动。

2. 使用清除浮动的伪元素after

这是一种比较常用的清除浮动的方法。首先，需要为父元素设置position:relative的样式；然后，使用:after来添加一个伪元素，并为伪元素设置content:""和display:block的样式；最后，给伪元素添加clear:both的样式来清除浮动。示例代码如下：

<div class="parent">
  <div class="float-left">浮动元素1</div>
  <div class="float-right">浮动元素2</div>
</div>

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

上述代码中，使用了:after伪元素来清除浮动。这种方法比起在父元素末尾添加空标签来说更加优雅，还可以避免使用空标签而造成的语义不清的问题。

除了以上两种方法，还有以下方法可以清除浮动：

• 使用父元素overflow属性：给父元素设置overflow:hidden或overflow:auto的样式即可清除浮动；
• 使用BFC（块级格式化上下文）：给父元素添加一个BFC，可以使用float、position:absolute/fixed、display:inline-block/table-cell/table-caption等样式来触发BFC；
• 使用CSS的clear属性：在父元素或浮动元素中使用clear:left/right/both的样式来清除浮动；
• 使用Flex布局：给父元素设置display:flex的样式即可实现清除浮动。

以上6种方法都可以清除浮动，根据实际情况选择适合自己的清除浮动的方法即可。