overflow:hidden的原理问题

问题说明：

<style>        .wrap{            width:300px;            border:2px solid #f00;        }        .child{            float:left;            width:100px;            height:200px;            border:2px solid #fcc;        }    </style>    <div class="wrap">        <div class="child"></div>        <div class="child"></div>    </div>

当父元素没有指定的高度，其子元素设置为浮动时，包裹子元素的父元素会出现高度塌陷问题，这时给父元素设置overflow:hidden属性就能清除浮动带来的影响，使父元素包含子元素。

 .wrap{            width:300px;            border:2px solid #f00;            overflow:hidden;        }

所以overflow:hidden的原理就是：overflow:hidden触发了BFC，而对于创建了BFC的元素，其浮动子元素也会参与高度计算，所以解决了高度塌陷问题。
上述说明符合BFC约束规则：计算BFC的高度时，浮动子元素也参与计算。

补充说明：
(1) 上述情况是在父元素没有设置高度的情况下，设置overflow:hidden属性会让父元素根据子元素的高度来包含子元素。
(2) 如果父元素设置了高度，并且高度小于子元素的高度：

   .wrap{            width:300px;            height:50px;            border:2px solid #f00;            overflow:hidden;        }

那么子元素多余的部分会被裁剪隐藏掉，这就说明：overflow:hidden的意思是：超出的部分会被裁剪隐藏。
(3) 如果父元素设置了高度，并且高度大于子元素的高度，就会正常显示。

   .wrap{            width:300px;            height:300px;            border:2px solid #f00;            overflow:hidden;        }