终极奥秘:清除浮动的核心要素就是解决浮动之后脱离文档流,父元素塌陷问题,也就是让父元素有足够的高度去包含浮动元素,围绕这一点有几种常见的方式,一起来看看吧
1.给父元素加高度
这个应该不要解释了吧
2.结尾处加个空div,给这个标签加clear:both
在精通css这本书里,就详细的提到里这个方法,我在这大致的讲一下,有兴趣的小伙伴可以去看看,虽然书有点老了,但是还是一本值得去看的书,具体的clear:both的原理也是遵循终极奥秘,浏览器会给清除的元素加上足够的顶外边距,使元素的顶边缘垂直下降到浮动元素的下边,让父级div能自动获取到高度,包含浮动元素
3.使用after伪元素清除浮动
这是目前比较推荐的用法,部分代码如下
.container .top .right:after{
content: "";
display: block;
clear: both;
}