CSS3笔试题精讲1

Q1 BFC专题

防止父元素高度坍塌 4种方案

父元素的高度都是由内部未浮动子元素的高度撑起的。

如果子元素浮动起来，就不占用普通文档流的位置。父元素高度就会失去支撑，也称为高度坍塌。

即使有部分元素留在普通文档流布局中支撑着父元素，如果浮动 起来的元素高度高于留下的素。那么浮动元素的高度会超出父元素边框。

方案一：为父元素设置 overflow: hidden 属性。

原理：CSS中的overflow :hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的margin范围。

缺点，如果刚好父元素有些超范围的子元素内容需要显示(比如，个别position定位的子菜单项)，不想隐藏，就会发生冲突。