html&css常见问题之高度塌陷

一、前言

    在我们日常利用HTML和css写页面的时候，常常会碰到高度塌陷的问题，尤其是对于初学者来说这个问题真的是非常的头疼。那么什么是高度塌陷呢？

    例如：

        我们想要的效果是这样：

        

    但是出来的结果却是这样

   

要疯了有木有！！！

二、解决方法

    针对非IE6以下的版本的浏览器，有以下几种方案

        1.直接将父级元素的长宽写死

            缺点：当子元素的大小发生改变时，父级元素不能够自适应

        2.为父级元素设置浮动

            一般出现高度塌陷大多是由于浮动引起的

            缺点：当设置浮动后父级元素宽度会跟着发生改变

        3.设置绝对定位

        4.设置元素为inline-block

        5.将overflow属性设置为hidden（推荐使用）

            此方法相对于其他方式来说，副作用最小。

    针对IE6及以下版本浏览器

        1.设置zoom：1；

三、原理

    在w3c标准（非IE6以下版本采用的是W3C标准）中，每一个元素会有一个隐藏的属性，即BFC，该属性在默认情况下是关闭的

    

    当BFC开启的时候回获得以下特性：

        1.父级元素的内外边距不会与子元素重叠

        2.开启后不会被浮动元素所覆盖

        3.开启后可以包含浮动子元素

    

    开启方式：参照解决方案中的2~5

    IE6及以下版本浏览器代替BFC的属性叫做hasLayout

    功能与BFC类似，开启方式有很多种，其中副作用最小的是将room属性设置为1.