高度塌陷及清除浮动

高度塌陷问题及其解决方案(常见的几种清除浮动的方法及其优缺点)

父元素没有设置高度,子元素浮动后导致父元素高度为0,就叫做高度塌陷问题
1、给父元素设置overflow:hidden;(实际应用较多)

原理:给父元素设置overflow:hidden;触发了BFC(块级格式化上下文)的状态,闭合了子元素的浮动,子元素重新参与父元素的高度计算,父元素高度不再为0
缺点:显示在父元素框之外的部分会被隐藏

2、在浮动的子元素的末尾添加一个空div,并进行设置

.box{
		clear: both;
		height: 0;         //为了兼容IE6
		overflow: hidden;  //为了兼容IE6
}

缺点:在页面中多次出现这样的空div,容易造成代码的冗余

3、万能清除法

父元素{
		content: "";          //必不可少
		display: block;       //将内联元素转为块元素
		clear: both;          //清除浮动
		height: 0;            //为了兼容IE6
		overflow: hidden;     //为了兼容IE6
		visibility: hidden;   //进一步确保隐藏
}

优点:官方推荐

扩展:元素隐藏不可见的两种方式:
1、display: none; (元素隐藏,位置不保留)
2、visibility: hidden; (元素隐藏,位置保留)

上一篇:CSS实现隐藏滚动条但可以滚动


下一篇:css截取td里面的内容 如何固定td th的宽度