什么是clearfix？ clearfix是一种CSS技术，可以解决在父元素中包含浮动子元素的问题，而无需添加新的html标记。 这个技巧的版本很多，但最受欢迎的是Micro Clearfix Hack。 这也是Bootstrap采用的方案。 可以在谷歌上查看“bootstrap clearfix”以了解详细信息。
Micro Clearfix Hack作者提出的原始方案，内容如下。/* * * formodernbrowsers *1. thespacecontentisonewaytoavoidanoperabugwhenthe * contenteditableattributeisincludedanywherelelele otherwiseitcausesspacetoappearatthetopandbottomofelements * thatareclearfixed.*2. theuseof ` table ` rather than ` block ` tocontainthetop-marginsofchildelements.*.*/. cf : before， cf:after { content: ‘； //display :表；/*2*/}.cf : after { clear : both； }/* * * forie6/7only * includethisruletotriggerhaslayoutandcontainfloats.*.cf { * ys dxl 33601； }但我的习惯是支持到IE9，同时习惯把“clearfix”作为class名称。 稍作修改的版本均如下。 clearfix:before， clearfix : after { content : ‘； 显示：表； }.clearfix : after { clear : both； }使用这个方法很久以来，我一直以为上面的代码是天书。 特别是无法理解display: table的行。 其实，这些代码是为了解决实际上经常遇到、非常生气的两个问题。 问题一弄清楚，代码也就知道了。 在消除子元素浮动之前，先谈谈第一个问题和解决方案。
对div布局的初学者来说，一个非常棘手的问题是如果父元素包含几个子元素，则当所有子元素都设定为“浮动”(e.g float: left )时，父元素的高度为0。
例如，有以下html代码：
如果divclass=’ container ‘ divclass=’ item ‘1/divdivclass=’ item ‘2/div/div子元素没有浮动，则显示以下内容：
但是，如果所有子元素都浮动，则父元素的高度为0，产生这种恶心效果。
解决方法如下。
将clearfix添加到html
只要解决divclass=’ container clearfix ‘ divclass=’ item ‘1/divdivclass=’ item ‘2/div/div这个问题，下面的代码就足够了。
. clearfix : after { content : ‘； 显示： block； clear: both； }但是请注意，文章的第一个代码可以使用display: table而不是此处的display: block来解决此问题。 但是，以下问题需要使用display: table。
Margin Collapse外侧距离重叠的问题是另一个问题。
外面和外面重叠也是讨厌的问题。 说明一下症状吧。
容器包含item子元素，代码如下
divclass=’ container ‘ divclass=’ item ‘ item/div/div例如，默认情况下显示如下：
此时，我在item上添加了margin-top: 30px。 本来，我们期待的结果是item块本身应该远离container青色区域的上边界30px。 同时一个不良反应是氰区应增高30px。 但是，实际上得到的效果如下。
这是因为，即使在上述情况下，父元素的margin-top也会重叠，就像父元素container自身的margin-top为0时一样。 一个这样的现象是，父元素“包不住”、充斥着子元素的margin-top。 同样的问题也发生在边距底部。
要解决此问题，请将clearfix添加到容器中。 html代码如下
divclass=’ container clearfix ‘ divclass=’ item ‘ item/div/div如果只针对此问题，则最简单的clearfix实现如下：
. clearfix:before， clearfix : after { content : ‘； 显示：表； 请注意，将display: table更改为dispaly: block是不行的。
当然，外部边距的重叠不仅发生在上面的父子元素之间，也发生在兄弟元素之间。 即使是高度为0的要素，自己上下的空白也会重叠。 这是MDN Margin Collapse文档中出现的所有三种情况，但后两种情况在实际开发中不会带来太大的麻烦。 另外，我也不在乎我们的clearfix方法。
结语把两个问题的解决代码放在一起，就是文章开头Peter发出的clearfix代码。 clearfix方法对于根据div的block模型合成非常有用，因为在从子元素中添加浮动或边距时，父元素的行为非常符合正常预期，并且页面布局的开发非常简单。
但是，顺便说一下，在未来，flexbox会大大普及。 flexbox模型的特点是不使用浮动，子元素的边距不与父元素重叠。