Question

在此example中，为什么container需要将伪元素after和before与content: ''和display: table一起展示灰色背景？不应该container自动展开以适应它的两个孩子，然后用灰色背景填充负空间而不用伪元素吗？

Answer 1

这被称为＆＃39; clearfix＆＃39;，当一个容器让他的所有孩子都浮动时，你必须在它上面使用一个clearfix。我在容器中放了黑色背景：

使用clearfix： https://codepen.io/anon/pen/GvoEjx

没有clearfix： https://codepen.io/anon/pen/NvxgRe

.container:before,
.container:after {
  content: "";
  display: table;
  clear: both;
}