CSS为什么可以清除浮动
浮动是网页布局常见的一个效果，但同时也是令许多开发者困扰的问题之一。特别是在浮动元素高度不固定的情况下，更容易引起父元素高度崩溃、重叠或错位等问题。而CSS提供的清除浮动技巧，便可处理这些问题，让浮动更加稳定有效。
什么是浮动
浮动是指让元素在父元素内，尽可能地靠左或靠右排列。通过CSS属性float属性可以实现对元素的浮动效果。一些应用场景包括：
实现多列布局
文字环绕图片
呈现浮动导航菜单等
浮动的副作用
浮动元素在排列时，会脱离原本在文档中的流动，导致父元素的高度变得不确定，因此可能会出现以下问题：
父元素的背景色或背景图片无法显示齐全
margin、padding等元素属性的失效
多个浮动元素重叠
父元素高度塌缩
清除浮动的技巧
又称为“解决浮动问题”的几种常用技巧：
通过为父元素设置明确的高度
使用clearfix伪类
通过添加clear属性解决
使用overflow:hidden/scroll/auto
使用flexbox布局等
clearfix伪类的应用
clearfix 伪类是指将一个伪类添加到父元素，通过其display和:after属性，使浮动元素清除浮动的效果更加稳定可靠。
.clearfix::after{
content: '';
display: table;
clear: both;
}
.clearfix {
zoom: 1;
}
经过这样处理后，即使在浮动元素高度不确定的情况下，父元素高度也不会失效，不影响后面的元素。
clear属性的应用
clear 属性用于定义一个元素应该在哪些方向禁止浮动元素。常见的属性值有：
clear:left 表示元素下方不允许左侧有浮动元素
clear:right 表示元素下方不允许右侧有浮动元素
clear:both 表示下面不允许出现浮动元素
使用clear属性可以让当前元素在指定方向上解除对浮动元素的影响，免去浏览器的解释过程，提高访问效率。
overflow属性的应用
设置 overflow 属性，可以定义自己包含的元素的布局方式，即指定生成何种新的 BFC 块格式上下文。因为每个BFC之间互相独立，因此可以使浮动元素的影响隔离开来。常见的属性值包括：
hidden： 隐藏元素溢出部分
scroll： 显示滚动条
auto：自动处理溢出部分
而使用 overflow: hidden; 可以隔离出一段新的 BFC 块格式上下文，使得子元素能够清除浮动后不影响后面的元素布局。
flexbox布局的应用
在 CSS3 中引入了一种名为 flexbox 的新的布局方式，它解决了许多之前由浮动元素带来的问题，可以轻易地让容器内的项目，呈现出完美的对齐方式。
.father{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
通过类似这样的CSS设置即可非常方便地控制容器内元素的布局，不用考虑过多的浮动清除问题。
清除浮动是网页布局工作中不可避免的问题，但通过CSS提供的技巧，我们可以轻轻松松地解决相关问题，令页面更具美感和实用性。
