清除浮动的几种写法

情景：块级元素在嵌套的状态下，子元素设置了浮动，父元素不浮动。

<div class="parent">

<div class="left"></div>

<div class="right"></div>

</div>

效果：父元素包不住子元素，父元素的高度缩成一条线（1个像素，俗称“高度塌陷”）

原因：子元素浮动，结构上脱离了文档流，撑不开父元素的高度。

解决办法1：在父元素设置如下样式：

.parent{zoom:1}

.parent:after{ content:"";display:block; clear:both; }

解决办法2：

.parent{overflow:hidden;}