关于Clear:both,left,right

清除浮动是一个很常见的东西。得了解下，不能就记个形式，这样对自己不负责呀。
问题的描述，前端写代码稍不留神，就会这个熊样。

描述

我的本意是，在这个DIV里放三个DIV，但是三个DIV并没有撑开这个大的DIV。但是难搞的float把父子DOM搞乱了，脱离了正常的文档流。
下面是出错的代码

<style>
        .d1{ border: 1px solid cornflowerblue;
        background-color: chocolate;
        padding: 5px;
        }
        .r{
            width: 50px;
            height: 50px;
            background-color:blueviolet;
            float: left; 
            border: 1px solid cornflowerblue;
        }
    </style>
</head>
<body>
        <div class="d1">
                <div class="r"></div>
                <div class="r" ></div>
                <div class="r"  ></div>
            </div>
</body>

如果在网上搜，那么就问有一段问答：
在第三个div下加一个<div style="clear: both"></div>马上OJBK。
但是为什么不是一开始？为什么要加这个？这是个干吗的？

成了！

如果去翻W3C的话，就有这么玩意：

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

我的理解是这样的， <div style="clear: both"></div>的两边不能出现浮动元素，然后，就是强行自己另起一行。这个clear属性只对自己起作用，别的他管不了，他也清不了别人的格式，就只能自己另起一行，让自己的左右都没有浮动元素。如果自己有浮动，没有影响。

我们把<div style="clear: both"></div>加个边框，看看这位div老铁在哪儿。

找老铁

这个div老铁另搞了一行，顺带把三个紫色的DIV顶上去了。
为什么是顶上去呢？而不是顶下去呢？
其实我也不知道，但就是顶上去了。。。。

那，如果换下这个div老铁的位置呢？

<div class="d1">
                <div class="r"></div>
                <div class="r" ></div>
                <div style="clear: both ;border: 3px solid darkgreen;"></div>
                <div class="r"  ></div>
                
            </div>

换下位置

上面只有两个，那就顶两个啊！！！第三个该脱还是脱。

其实float布局的出现本来就是意外，css中因为历史的原因，充满了各种意外，有什么好的办法不遇到这些奇怪的BUG呢?

用新的flex和grid。

关于Clear:both,left,right

推荐阅读更多精彩内容