在进行响应式设计时，通常都会遇到浮动元素引起的问题。在使用浮动元素时，需要注意浮动元素的位置和大小，否则页面布局可能会出现混乱的情况。为了避免这种情况，我们需要在浮动元素后面加上清除浮动。
什么是浮动？
浮动是 CSS 中一种定位方式。浮动元素会脱离文档流并在其父元素中移动。在父元素中包含浮动元素时，父元素的高度也会随之改变。
浮动导致的问题
在使用浮动元素时，通常会遇到以下问题：
1. 高度塌陷
当父元素包含浮动元素时，父元素的高度会随着浮动元素脱离文档流而塌陷，从而导致内容溢出的问题。
2. 布局混乱
当浮动元素的位置和大小没有正确设置时，页面布局可能会出现混乱。
清除浮动的方法
为了避免浮动元素带来的问题，我们需要清除浮动。下面介绍几种常用的清除浮动的方法。
1. 使用 clear
可以在浮动元素后面添加一个空的 div 标签，并给该标签设置 clear 属性。
<div class="float-left"></div> <div class="clear-both"></div> <!-- 清除浮动 -->
.float-left {
float: left;
width: 50%;
}
.clear-both {
clear: both;
} 2. 使用 overflow
可以在父元素中添加 overflow 属性，可以将父元素包含浮动元素的高度撑开。常用的值有：auto（默认值）、hidden、scroll。
<div class="parent">
<div class="float-left"></div>
</div> .parent {
overflow: hidden;
}
.float-left {
float: left;
width: 50%;
} 3. 使用伪元素
可以在父元素中使用伪元素 :after 清除浮动，需要给伪元素添加 content 属性并设置为“ ”空格。
<div class="parent">
<div class="float-left"></div>
</div> -- -------------------- ---- -------
------------- -
-------- ---
-------- ------
------ -----
-
----------- -
------ -----
------ ----
- 结论
在进行响应式设计时，清除浮动是必不可少的一步。本文介绍了清除浮动的三种常用方法：使用 clear、使用 overflow、使用伪元素。希望这篇文章对大家在前端开发中遇到的浮动问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fdad8d4471362601809bb6