高度坍塌

高度塌陷发生的场景

       当父元素的高度由内容撑开,子元素浮动后(脱离文档流)子元素浮动后,父元素识别不了子元素的高度,就会出现高度塌陷。

解决办法

1、给塌陷的元素添加Overfolow:hidden(超出父元素宽度隐藏内容);会触发BFC(独立的渲染区)因为BFC规则:就算元素浮动后。BFC计算高度的时候,浮动元素也参与计算。缺点:超出元素会被隐藏掉

2、给浮动元素的最后面设置一个div,给这个div设置clear:both;原理:both会清除两边的浮动。缺点:会形成代码的多余,造成不必要的浪费,延缓加载。

3、万能清除浮动法after{conter:".";clear:both;displan:block;height:0;overflow:hidden:visibility:hidden;};属于css3的属性,兼容性不好