子div设置float后会导致父div无法自动撑开

float 被称为"魔鬼属性" , 因为一不小心就会出现很多问题, 它具有以下特征:

• 包裹性

• 块状化并格式化上下文

• 破坏文档流

• 没有任何 margin 合并

为了避免空间塌陷问题, 我总结了几种办法（假设父div的class为“container”）:

1. 使用伪类

container::after{    display: block;    height:0;    content: '';    clear: both;
}container{    display: inline-block; /*第一种撑开办法，底下会有部分被遮到，所以添加这行，就完美了*/}

由于 clear:both 的作用本质是让自己不和 float 元素在一行显示, 并不是真正意义上的清除浮动, 因此 float 元素一些不好的特性依然存在, 比如:
(1) 如果 clear:both 元素前面的元素就是 float 元素, 则 margin-top 负值即使设成 -9999px , 也不见任何效果
(2) clear:both 后面的元素依旧可能会发生文字环绕的现象

1. 不撑开的原理是 overflow 不可见，所以给父div添加 overflow:auto; 就行，IE要用 _height:1%;

container{    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏，但是底下会被遮到一点，不完美*/
    _height:1%;/*对IE的hack*/}

1. 可以设置父div的高度（也就是手动撑开，不灵活）

2. 给父div设置 display: inline-block; 或 display:table; 属性

3. 给子div设置 display: inline-block; 属性也能自动撑开，但是排版问题有待研究

4. 子div浮动我就套不住你? OK,我让父div也浮动: 父div设置 float: left; 也可以

作者：小贤笔记
链接：https://www.jianshu.com/p/d4ad7936a416