解决高度塌陷的方法

Posted 2020-11-13 niuyaomin

我们在进行页面布局的时候可以发现元素在脱离文档流后，就会出现高度塌陷问题。

众所周知高度塌陷的原因是因为子元素脱离文档流所造成的父元素塌陷（所谓的高度塌陷就是子元素和父元素不在一个层级，未设置高宽的父元素里面没有子元素的支撑就会塌陷）会影响页面布局和美观性。

以下提出几点解决方案

首先我们先引出一个概念:Block Fomatting Context，我们称为块格式化上下文 简称BFC，这是每个元素都具有的一个属性！

开启BFC的元素都有以下特点:

1.开启了BFC的元素与其父元素的垂直外边距不会发生重叠

2.开启了BFC的元素会包含其浮动的子元素*

3.开启了BFC的元素不会被浮动元素所覆盖

那么如何开启BFC呢？

1.display:inline-block

-这种方式虽然能够撑开父元素，且下面元素布局不会受到影响，但是会使父元素宽度丢失。


2.设置元素浮动

-这种方式虽然能够撑开父元素，但会使父元素宽度丢失，且下面所有元素的布局也会向上挪动，影响布局

3.overflow:hidden

-副作用最小的开启BFC的方式

4.overflow在ie浏览器里面会失效有一个兼容问题可以使用zoom来带替。zoom后面的值是几意思就是将元素放大几倍！适用于ie8以下的浏览器