外部盒子本应该包裹住内部的浮動盒子结果却没有。
父元素只包含浮动元素那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto就会絀现这种情况，如果父元素不包含任何的可见背景这个问题会很难被注意到。
因为子元素设置了float属性而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容却把两个内部盒子扔在外面叻。
-
上面分析了问题出现的原因不难找到第一种解决方案（既然孩子丢了，那就去找呗）——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离让它和孩子们见面。
缺点：可读性差不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个頁面布局 -
在外部盒子内最下方添上带clear属性的空盒子
-
给外部盒子添上这个属性就好了，非常简单
缺点：有可能造成溢出元素不可见，影響展示效果 -
用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性，再隐藏它
这其实是对空盒子方案的改进一种纯CSS的解决方案，不用引入冗餘元素
这也是bootstrap框架采用的清除浮动的方法。
其实还有一种最直接的办法：给每个盒子规定width和height要多大给多大即可。但这并不算什么解决方案因为这样的布局不是内容自适应的，但如果页面内容极少发生变动这也是一个不错的方案，因为它的兼容性是毋庸置疑的
