解决高度塌陷的方法
我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题。
众所周知高度塌陷的原因是因为子元素脱离文档流所造成的父元素塌陷(所谓的高度塌陷就是子元素和父元素不在一个层级,未设置高宽的父元素里面没有子元素的支撑就会塌陷)会影响页面布局和美观性。
以下提出几点解决方案
首先我们先引出一个概念:Block Fomatting Context,我们称为块格式化上下文 简称BFC,这是每个元素都具有的一个属性!
开启BFC的元素都有以下特点:
1.开启了BFC的元素与其父元素的垂直外边距不会发生重叠
2.开启了BFC的元素会包含其浮动的子元素*
3.开启了BFC的元素不会被浮动元素所覆盖
那么如何开启BFC呢?