在HTML中，浮动属性（float）是一种布局方式，可以让元素脱离文档流并向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边缘，虽然浮动属性可以方便地实现一些复杂的布局效果，但有时也会导致一些问题，比如父元素高度塌陷、元素重叠等，在某些情况下，我们需要清除浮动属性。
（图片来源网络，侵删）
清除浮动的方法有很多，下面将详细介绍几种常用的方法：
1、使用clear属性
clear属性用于指定元素旁边是否有其他元素，它有三个值：left、right和both，分别表示不允许左侧有浮动元素、右侧有浮动元素和两侧都不可以有浮动元素，我们可以在需要清除浮动的元素上添加clear属性，如下所示：
<div style="clear: both;"></div>
这种方法适用于简单的布局，但对于复杂的布局可能会显得繁琐。
2、使用伪元素清除浮动
CSS伪元素是在元素的第一个子元素之前或之后插入的虚拟元素，我们可以利用伪元素来清除浮动，如下所示：
.clearfix::after {
content: "";
display: table;
clear: both;
}
这里我们使用了名为.clearfix的类，通过伪元素：:after在元素的最后一个子元素之后插入了一个匿名的块级元素，并设置clear: both，从而清除了浮动，使用时，只需要在需要清除浮动的元素上添加.clearfix类即可：
<div class="clearfix"> <div style="float: left;">左边浮动元素</div> <div style="float: right;">右边浮动元素</div> </div>
3、使用overflow属性
当一个元素的overflow属性值为auto或scroll时，如果该元素的子元素发生浮动，浏览器会自动在容器底部添加滚动条以避免内容溢出，我们可以利用这个特性来清除浮动，如下所示：
.clearoverflow {
overflow: auto;
}
使用时，只需要在需要清除浮动的元素上添加.clearoverflow类即可：
<div class="clearoverflow"> <div style="float: left;">左边浮动元素</div> <div style="float: right;">右边浮动元素</div> </div>
需要注意的是，这种方法可能会导致不必要的滚动条出现，因此在实际使用中要谨慎。
4、使用CSS框架提供的清除浮动类
许多CSS框架（如Bootstrap、Foundation等）都提供了用于清除浮动的类，可以直接使用，在Bootstrap中，可以使用.clearfix类来清除浮动：
<div class="clearfix"> <div class="floatleft">左边浮动元素</div> <div class="floatright">右边浮动元素</div> </div>
清除浮动是CSS布局中的一个重要技巧，掌握好各种清除浮动的方法可以帮助我们更好地解决布局问题，在实际开发中，可以根据具体情况选择合适的方法来清除浮动。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/439278.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
