关于浮动元素的高度塌陷问题

高度塌陷\清除浮动

浮动元素高度塌陷产生的原因：在给元素添加("{float：left/right}")属性之后,会使原来的HTML脱离标准文档流，成为浮动流元素而悬浮于标准文档之上。如果其父元素大小为自适应，此时高度就会变为0，从而造成高度塌陷。

为了避免浮动元素对后续页面结构元素的干扰，我们需要进行清除浮动的操作，主要有以下几种方法供参考：

1、给父盒子添加一个固定高度；
缺点：由于我们在开发页面时，经常要使元素高度自适应，把高度固定不利于页面拓展。


2、给父元素添加属性overflow:hidden;
缺点：超出父元素的样式或文本会被隐藏掉，这对有些页面的功能有影响。


3、在浮动元素下方添加空div，并给该元素添加如下css样式：
	    {
	    clear:both; 
	    height:0; 
	     overflow:hidden;
	     }
缺点：添加的这个空的div元素只是为了清除浮动没有别的作用，这不符合HTML的语义化要求。


4、伪类清除浮动(也有叫万能清浮法)：
    浮动盒子的父元素::after{
				    content:""; 
				    display:block; 
				    clear:both;
				    height:0;
				    overflow:hidden;
				    visibility:hidden;
				    }
由于伪元素为css的一部分，避免了无意义的元素添加同时能够清除浮动，因此此方法比较适用于清除浮动。