clear:both用于清除浮动。这一直是我的印象，但我很少用这个，我的理解其实也不正确。今天查了资料，记录一下float的脱离文档流float原来的作用是实现文字换行的功能，可以理解为部分脱离文档流。在CSS中，脱离文档流就是把盒子从普通的布局和排版中取出来，当放置其他盒子时，它们会像不存在一样被布局。文档外流有两种：比如position:absolute，使用一个绝对定位的盒子，其他的盒子无论是本身还是里面的任何元素，都会忽略这个绝对定位的盒子进行布局。部分脱离文档流：即浮动框。使用float属性后，其他blockbox会忽略floatbox进行布局，但是其他box中的inline元素和inline-block元素仍然会为这个floatbox腾出空间。clear:bothclear:both应用于框本身添加属性。添加clear:both到一个盒子意味着盒子的顶部边框将低于它之前任何浮动盒子的底部边距。soclear：两者都不是清除浮动，而是清除浮动带来的影响。浮动框仍然有一部分处于文档流之外。而clear的值是left还是right，在我看来，取决于你要低于的floatingbox的浮动方向。两者的值都将低于它之前的任何浮动框的值。比如我们设置A、B、C三个盒子向左浮动。B添加clear:both/clear:left:可以看到，B本身造成的浮动效果被清除了，它的上边框在他之前任意一个浮动框的底部下方，但是未浮动的框C还在AB中，字体为浮动框腾出空间的位置。给父box添加一个伪元素::after现在我们用一个div(class:box)把ABC这三个盒子包裹起来，在盒子外面加一个out盒子，这里ABC和out都设置为float。现在它们看起来是这样的：去除漂浮出来：这是理所当然的事情。添加一个伪元素到box.box::after{clear:both;高度：10px；宽度：10px；背景：黄色；显示：块；content:"";}现在outerboxout的浮动效果被清除了，但是这不是因为clear:both都清除了浮动，而是因为after伪元素本身的浮动效果被清除了，所以现在在any下面floatboxbeforeit，这也使得盒子的高度不再塌陷，所以out现在正好在盒子下方，这是正常的文档流。##结束这是CSS的一个基础知识点，但是我没有认真看过。这次我整理好了。如果有任何错误，请阅读这篇小文章，请指正。
