clear:both 用来 清除浮动 这是一直来的印象，但是自己很少 会用 这个，理解其实也不太正确，今天查查了资料，记录一下
float的脱离文档流
float的原始作用是为了实现文字环绕的作用，可以理解为部分脱离文档流。
CSS中说脱离文档流是指 盒子 从普通的布局排版中拿出来，其他盒子进行放置时，会当其不存在而进行布局。而脱离文档流分为两种
完全脱离文档流：例如 pos IT ion:absolute ，使用绝对定位的盒子，其他盒子无论是其本身还是里面的任何元素都会无视这个绝对定位的盒子进行布局。 部分脱离文档流：即 float 盒子，使用 float 属性后，其他block盒子会无视 float盒子 进行布局，但是其他盒子内的inline元素和inline-block元素依旧会为这个浮动的盒子让出位置。clear:both
clear:both 是作用于添加属性的盒子本身的在一个盒子上添加 clear:both 意味着这个盒子的顶边框将会 低于 在它 之前 的任何浮动盒子的 底 外边距 。
所以 clear:both 并不是清除浮动，而是清除浮动所造成的影响，浮动的盒子依旧是部分脱离文档流的。
而clear的取值是left还是right,在我看来是取决于 想要低于的那个浮动盒子 的浮动 方向 。而 both 的取值，则会低于所有在在它之前的任何浮动盒子
清除影响的例子
我们设置三个盒子A、B、C
当三个盒子都左浮动是时：
C设置不浮动时：
给B添加clear:both/clear:left：
可以看到，B本身造成的浮动影响被清除了，他的顶边框在 任 何在 他之前的浮动盒子的底部 之下,但是没有浮动的盒子C仍然在AB的下边，其中的字体为浮动的盒子让出了位置。
给父盒子添加伪元素: :after
现在，我们用一个 div（class:box） 包裹住 abc 三个盒子，在 box 之外添加一个盒子 out ,其中ABC、out全部设置了浮动。现在他们长这样：
去掉out的浮动：
这是理所当然的。
给box添加一个伪元素
.box :: after{
clear: both;
h ei ght:10px;
width:10px;
background:yellow;
dis play : block;
content: "";
}
现在外盒子 out 的浮动影响被清除了，但是这不是因为 clear:both 清除了浮动，而是因为 after伪元素 本身的浮动影响清除了，它现在处于任何在它之前的浮动盒子的下面，这也使得 box 的高度不再塌陷，所以 out 现在只是处于 box 下面，这是 正常 的文档流。
# # 结束
这是一个CSS的基础知识点，但是一直没有认真看过，这次整理了一下，如果有错误的话，请看到这篇小文的大佬们指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 深度理解CSS clear:both的使用 全部内容，希望文章能够帮你解决 深度理解CSS clear:both的使用 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于深度理解CSS clear:both的使用的详细内容...