高度塌陷的原因及解决方法
父元素没有设置高度(自适应子元素的高度),当子元素脱离文档流的时候(设置float属性或者设置positon为absolute或fixed时),就会造成父元素的高度塌陷问题。
解决方案:
- 给父元素添加高度,违背初衷,不推荐。
- 触发BFC
BFC(block formatting context):块级格式化上下文。BFC有一个特性,计算其高度时,浮动元素也参与计算。BFC元素是一个独立的容器,容器里面的子元素不会影响到外面的元素。具体内容请参考这篇博客
触发BFC的五种方法:
1.根标签html就是一个bfc;
2.float不为none,但是给父元素设置float,会引起布局发生改变。
3.position为absolute或fixed
4.overflow为非visible
5.display 设置为table-cell、table-caption、flex、inline-block、inline-flex。
BFC的作用:
1.两个相邻box的margin会发生重叠,设置其中一个为BFC后可解决margin重叠的问题。
2. 清除浮动
3. bfc区域不会与float元素重叠
- 给父元素添加
overflow:hidden
。缺点是子元素定位到父元素外部时,会被隐藏。 - 在最后浮动元素的位置后添加一个div标签,并设置属性:
clean: both; overflow: hidden; height: 0;
缺点:添加无意义的div,造成冗余。 - 通过添加伪类
::after
.parent{
border:10px solid blue;
}
/* ::after对IE8以下有兼容问题,可以通过增加zoom: 1;声明来解决。 */
.parent::after{
content: " ";
clear:both;
/* height:0; */
overflow: hidden;
display: block;
visibility: hidden;
}
.son{
float: left;
width: 200px;
height: 50px;
background-color: red;
}