Clearfix黑客已经存在很长一段时间了，它修补了一个可能发生在浮动元素大于其容器的问题上的问题。
下面是这个问题的一个例子：
1.box {
2 padding: 1rem;
3 background: rgba(255, 105, 180, 0.1);
4 border: 3px dashed rgba(255, 105, 180, 0.1);
5 border-radius: 5px;
6}
7.box img {
8 float: left;
9}
1<div class="box">
2 <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
4</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...老ClearFix破解
旧的修复方法是在容器上设置overflow：auto，所以经常会创建这样的类，并在包含浮动元素的元素上使用：
1.clearfix {
2 overflow: auto;
3}
1<div class="box clearfix">
2 <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
4</div>
现在一切都按预期进行了：
Lorem ipsum dolor sit amet, consectetur adipiscing elit...展示：Flow-Root改进
在容器元素上使用DISPLAY：FLOW-ROOT，使用Flow Layout formatting，]为元素建立一个新的块格式化上下文，这将更好地修复溢出问题。
1.box {
2 display: flow-root;
3 padding: 1rem;
4 background: rgba(255, 213, 70, 0.1);
5 border-bottom: 2px solid rgba(236, 198, 48, 0.2);
6}
1<div class="box">
2 <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit...
4</div>
浏览器兼容性
截至2020年，全球87%的浏览器将基于[我可以使用数据吗]来正确处理Flow-Root。(http://caniuse.com/# feat=flow-root)Opera Mini 和** Internet Explorer11** 不能处理Display：Flow-Root；，但到2020年，它在全球使用中所占的比例不到1.5%。