在前端开发中，我们经常会使用 CSS Reset 来规范化不同浏览器之间的样式差异，以确保页面在不同浏览器中呈现一致的效果。但是，CSS Reset 中有一个常见的问题，那就是 clearfix。
什么是 clearfix？
在 CSS 中，当一个元素的容器高度小于其子元素的高度时，子元素会溢出到容器外部。这时，我们可以使用 clearfix 技术来清除浮动，让容器能够正确地包含其子元素。
常见的 clearfix 实现方式
1. 使用空的 div 标签
-- -------------------- ---- ------- ---- ----------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------ ------- ---------------- - -------- --- -------- ------ ------ ----- - ----------- - ------ ----- - --------
2. 使用伪元素
-- -------------------- ---- ------- ---- ----------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------ ------- ---------------- - -------- --- -------- ------ ------ ----- - ----------- - ------ ----- - --------
3. 使用 overflow 属性
-- -------------------- ---- ------- ---- ----------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------ ------- --------- - --------- ----- - ----------- - ------ ----- - --------
为什么要注意 clearfix？
虽然 clearfix 是一个常见的技术，但是它在一些情况下会导致一些问题，比如：
- 在使用 table 布局的时候，clearfix 会破坏表格的布局。
- 在使用 flex 布局的时候，clearfix 也会破坏布局。
如何解决 clearfix 问题？
1. 使用 BFC
BFC（块级格式化上下文）是一个独立的渲染区域，可以避免元素间的干扰，常见的 BFC 触发方式有：
- 根元素
- 浮动元素
- 绝对定位元素
- display: inline-block;
- display: table-cell;
- overflow: hidden|scroll|auto;
-- -------------------- ---- ------- ---- ------------------ ---- ------------------------- ---- ------------------------- ---- ------------------------- ------ ------- ---------- - --------- ------- - ----------- - ------ ----- - --------
2. 使用 flex 布局
flex 布局是一种现代的布局方式，它可以轻松地解决 clearfix 的问题。
-- -------------------- ---- ------- ---- ------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ------ ------- ---------- - -------- ----- - ---------- - ----- -- - --------
总结
在使用 CSS Reset 的时候，我们需要注意 clearfix 的问题，避免它破坏布局。如果遇到 clearfix 的问题，我们可以使用 BFC 或者 flex 布局来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6603d3c4d10417a22204f7c8