这是一个不同的方法，同样的东西，但有点不同

区别在于内容点被替换为\00A0 ==空格

更多信息http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

这是它的精简版……

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}

在CSS基于浮动的布局中常用的一种技术是将少量CSS属性分配给你知道将包含浮动元素的元素。该技术通常使用名为clearfix的类定义来实现，(通常)实现以下CSS行为:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

这些组合行为的目的是创建一个容器:在活动元素之后，包含一个单独的'。'标记为隐藏，这将清除所有预先存在的浮动，并有效地重置页面的下一段内容。

我尝试了接受的答案，但我仍然有一个问题的内容对齐。添加如下所示的“:before”选择器修复了这个问题:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

上面的LESS将编译为下面的CSS:

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

这是一个不同的方法，同样的东西，但有点不同

区别在于内容点被替换为\00A0 ==空格

更多信息http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

这是它的精简版……

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}

提供2017年第二季度的最新情况。

新的CSS3显示属性在Firefox 53、Chrome 58和Opera 45中可用。

.clearfix {
   display: flow-root;
}

查看任何浏览器的可用性:http://caniuse.com/#feat=flow-root

元素(其显示属性设置为flow-root)生成一个块容器框，并使用流布局布局其内容。它总是为其内容建立一个新的块格式化上下文。

这意味着如果你使用一个包含一个或几个浮动子div的父div，这个属性将确保父div包含它所有的子div。没有任何需要一个clearfix hack。在所有子元素上，甚至不能是最后一个虚拟元素(如果您在最后一个子元素上使用:before的clearfix变体)。

.container { display: flow-root; background-color: Gainsboro; } .item { border: 1px solid Black; float: left; } .item1 { height: 120px; width: 120px; } .item2 { height: 80px; width: 140px; float: right; } .item3 { height: 160px; width: 110px; } <div class="container"> This container box encloses all of its floating children. <div class="item item1">Floating box 1</div> <div class="item item2">Floating box 2</div> <div class="item item3">Floating box 3</div> </div>

其他答案都是正确的。但我想补充的是，当人们第一次学习CSS时，它是一个时代的遗迹，滥用float来做所有的布局。Float是用来在长文本旁边放置浮动图像的，但很多人把它作为主要的布局机制。因为这并不是真正的目的，你需要像“clearfix”这样的技巧来让它工作。

如今，display: inline-block是一个可靠的选择(除了IE6和IE7)，尽管更多的现代浏览器正在推出更有用的布局机制，如flexbox, grid layout等。