可以看到父元素的高度为0，为了解决这种情况，需要清除浮动。清除浮动的方法总结一下，大致如下：1.末尾的空元素或者after或者br等伪元素清除2.父元素也浮动3.父元素设置overflow为hidden或者auto4.父元素显示：table大致分类一下，可以分为两类，1使用clear属性，后者可以归为一类，都是通过触发BFC来实现的。下面我们就来详细了解一下这两类清浮的方法和原理。clear属性clear属性指定元素框的边缘不能与浮动元素相邻。该属性只能影响被清除的元素本身，不会影响其他元素。也就是说，如果已经有浮动元素，则该元素不会像原始元素那样受其影响。在第一种方式中，我们的填充元素（我自己的名字）扮演了这个角色。//这个当然可以换成空的div，
等，原理和效果都是一样的。整经器：在{内容：''之后；高度：0；显示：块；clear:both;}此时在after伪元素上设置clear:both说明我不能接受两边的浮动元素。本来受浮动元素影响，伪元素的位置如图所示在浮动元素下方：这显然不能支撑父元素的高度。设置好之后，是时候重新安排了。由于两边都不接受浮动元素，但是浮动元素的位置是确定的，所以我们只能在底部放置伪元素，如图：可以看到，伪元素的位置是在底部，距离顶部的高度就是浮动元素的高度高度，顺便支持一下父元素的高度。其他填充元素（displayisblock）同理，可以达到同样的目的。在看下面的原理之前，我们需要先看一下BFC的定义。BFCblock-levelformattingcontext：根据脚本定义的BFC（blockformattingcontexts）可能看起来很难理解。BFC是一个独立的渲染区域，只有Block-levelbox参与。它指定了内部Block-levelBox的布局方式。并且与这片区域之外无关。借用张新旭的话来说，BFC元素特性的表达原则是，无论内部子元素如何汹涌，都不会影响到外部元素。因此，避免保证金穿透和明确浮动很容易理解。如下所述：在块格式上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使存在浮动也是如此（尽管盒子的行框可能会因为浮动而缩小），除非盒子建立了新的块格式化上下文（在这种情况下盒子本身可能会因为浮动而变得更窄）在BFC中，每个框的左外边框紧挨着包含块的左边框（或者紧邻从右到左格式的右边框）。即使在有浮动的情况下也是如此（虽然盒子的边框会因为浮动而缩小，除非在盒子内部创建新的BFC浮动，否则盒子本身会变窄）。BFC块级格式化上下文的特性将防止边距覆盖块级格式化上下文不会与浮动元素重叠。它不会影响外部元素的布局，反之亦然，而BFC仍然属于文档中的正常流。所以浮动也解决了，以后会专门写一篇关于BFC的文章仔细研究一下。看到这里就知道为什么可以用来清浮了。以BFC形式出现的元素，都是非常个体化的存在。无论内在如何折腾，外在表现始终如一。你肯定能猜到，上面这几种使用BFC的清零方式，一定是触发了BFC的条件，这样父元素就变成了BFC。下面我们来看看触发BFC的条件，看看是不是和我们想的一样。BFC触发条件CSS3对本规范做了修改，称为：flowroot，对触发条件做了进一步的解释。float除了none之外的值overflow除了visible(hidden,auto,scroll)之外的值display(table-cell,table-caption,inline-block)position(absolute,fixed)Fieldset元素可以从上面比较，我们提到那些方法只是触发了BFC。看一个例子。warper{width:200px;边框：1px实心#ff6633；//选择以下属性之一overflow:hidden;溢出：自动；向左飘浮;显示：内联块；文章CSS深入理解了多列自适应布局下的流体特性和BFC特性。不要听别人说什么。当然，抛砖引玉更多的是共同学习，共同进步。更多请移步博客。