2018-11-14高度坍塌问题

image.png

导致该现象的原因是float产生的浮动,使子元素脱离了文档流,父级元素无法识别到子元素,从而显示为一条直线,
简单意义上来说是清楚浮动,但又不完全是,我们要做到的是对浮动标签的闭合

解决方案

1.
2.在父级元素上添加overflow:hidden 3. 4.父元素设置 overflow:auto 属性 5.使用 :before和 :after 双伪元素

原理即是BFC:块级格式化上下文。(把原来的块级元素占用的)
正常的父元素与子元素显示

image.png

加上float:left;后显示为
image.png

加上overflow:hidden;后显示为
image.png

此时父级元素的宽度加上了子元素的高度

你可能感兴趣的:(2018-11-14高度坍塌问题)