css高度坍塌

1. 防止高度坍塌（4种方案）

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

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

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

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

缺点：如果刚好父元素有些超范围的子元素内容需要显示。不想隐藏，就会发生冲突。

方案二：在父元素内的结尾追加一个空子元素（块元素），并设置空子元素清除浮动影响。（clear:both）

原理：利用clear:both属性和父元素必须包含非浮动的元素两个原理

缺点：无端多车一个无意义的看不见的空元素，影响选择器和查找元素。

方案三：设置父元素也浮动

原理：浮动属性也会强制父元素扩大到包含所有浮动的内部元素

缺点：会产生新的浮动影响。比如，父元素浮动，导致父元素之后的页脚div上移，被父元素挡住。

方案四：为父元素末尾伪元素设置clear:both   ：：after{content:””,display:table;clear:both;}

优点：既不会影响显示隐藏，又不会影响查找元素，也不会产生新的浮动问题