float 被称为"魔鬼属性" , 因为一不小心就会出现很多问题, 它具有以下特征:
- 包裹性
- 块状化并格式化上下文
- 破坏文档流
- 没有任何 margin 合并
为了避免空间塌陷问题, 我总结了几种办法（假设父div的class为“container”）:
- 使用伪类
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 后面的元素依旧可能会发生文字环绕的现象
- 不撑开的原理是 overflow 不可见，所以给父div添加
overflow:auto;就行，IE要用_height:1%;
container{
overflow: auto;/*让主要内容区随内容自动撑开*/
overflow-y:hidden;/*把出现的滚动条隐藏，但是底下会被遮到一点，不完美*/
_height:1%;/*对IE的hack*/
}
可以设置父div的高度（也就是手动撑开，不灵活）
给父div设置
display: inline-block;或display:table;属性给子div设置
display: inline-block;属性也能自动撑开，但是排版问题有待研究子div浮动我就套不住你? OK,我让父div也浮动: 父div设置
float: left;也可以
