前言
在我们进行网页布局时，我们经常会使用 float 属性使元素浮动，从而达到我们期望的布局效果。但是，这种布局方式也会带来一些问题，例如 float 元素会导致父元素高度塌陷等问题。
为了解决这些问题，许多前端工程师们都会使用 clearfix 清除浮动，这是一个非常好的解决方案。然而，在实际工作中，由于一些原因，我们可能会出现 clearfix 失效的情况。本文就是要讲述一次 CSS Reset 引起的 disaster，而实际上却只是因为 clearfix 没写好。
问题的出现
在有一次项目中，我决定使用一个著名的 CSS Reset 库来重置样式。然而，当我完成 Reset 后，页面的样式却出现了一些问题，主要表现为下面两个方面：
- 父元素高度塌陷。
我在一个父元素中放置了多个 float 元素，但是在 Reset 后，这个父元素的高度却突然变为了 0，使得一些后续的元素也被影响了。
- 布局出现错乱。
我在一个页面中使用了多个 clearfix，然而，由于某些原因，这些 clearfix 却失效了，使得页面布局出现了严重的错乱。
通过一系列排查和调试，我最终发现，造成这些问题的主要原因是我的 clearfix 没有写好。
解决方案
在我意识到问题源于 clearfix 后，我开始仔细检查代码，并逐步找到了问题的所在。
在 CSS Reset 结束后，我使用了 clearfix 来清除浮动，然而，我在代码中忘记将清除浮动的元素添加到相应的类中，导致这些元素的 clearfix 失效，从而引起以上问题。
经过修正后，这些问题得以顺利解决。具体解决方案如下：
确保
clearfix元素被正确的添加到父元素中。在使用
float属性的元素后，使用clearfix来清除浮动。使用
overflow:hidden;来清除浮动，或者使用after伪元素来清除浮动。
总结
在前端开发中，我们经常会遇到一些关于布局的问题，其中清除浮动就是我们不得不解决的一个问题。然而，我们要清楚自己代码中的 clearfix 是否正确，一些简单的错误往往可以导致一些严重的问题，在这里，我们只需要在 CSS Reset 后添加正确的 clearfix 即可避免这些问题的出现。
代码示例：
- HTML结构
<div class="parent">
<div class="float-left"></div>
<div class="float-left"></div>
<div class="clearfix"></div>
</div>- CSS样式
-- -------------------- ---- -------
------- -
-------------
--------- -----
------ --
---------------
------- -
------ -----
-------- ------
-------- ---
----------- -------
------- --
-
--------
--------- -
------ -----
-
-
----------- -
------ -----
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f56d15f6b2d6eab3e237e7