高度塌陷:子元素浮动,但是父元素没有设置高度,导致父元素的高度为0(不能撑开)
解决高度塌陷:
【1】给浮动的父元素设置overflow:hidden
因为设置overflow:hidden 元素没有高度的时候,会检测真是高度(会计算你所有子元素的高 度),浮动元素也会计算,顺带也把高度塌陷的问题解决了
缺点:会把定位在外面的元素隐藏
【2】在浮动元素下方添加空div,并给该元素添加,表示父元素需要计算这个元素的高度
声明:
div{
clear:both;
height:0;
overflow:hidden;
}
解析:clear:both; 表示在浮动后面去排列
【3】万能清除浮动法
高度塌陷的元素:
after{
content:“";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}