浮动塌陷问题 清除浮动的常见方法

浮动元素不占据正常文档流，而我们一般布局时不会给父元素设定高度，因为会随着内容自动增高。
浮动塌陷问题类似如下：
下面两部分产品图在同一个父元素中，图片使用float：left浮动排列，当我要给父元素设置浅蓝色背景时，由于父元素没有设置高度，而潮店酷玩文字下面的图片因为浮动脱离了父元素，没有被包含进去，因此背景颜色没有完全涵盖住这些图片。

解决办法：
1. 在父元素的最后添加一个子元素设置清除浮动的样式，使父元素的高度能够包含浮动元素。即添加<div style=“clear:both”>
2. 在父元素中使用overflow：hidden清除浮动，但对于定位的元素使用这个方法时注意当定位元素超出父元素范围时会被隐藏掉。
3.使用伪元素清除浮动
<div style=“clear:both”>使用该方法会增加浏览器的渲染负担，可以考虑使用伪元素 :after 来代替这个空白标签，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动。
代码如下：

   .clearfix::after{
    content: '';
    display: block;
    height: 0;
    line-height: 0px;
    clear: both;
    visibility: hidden;
    }

代码布局大致如下：

<div style="background-color:lightblue;overflow:hidden">
<div class="recommendation">
<p class="produce-title">美丽人生&nbsp;&nbsp;<small>FASHION & BEAUTY</small></p>
<div class="produce">
<a href="#"><img src="images/picture2.png"></a>
<p class="produce-describe">Pierre Cardin/皮尔卡丹休闲春夏春秋长袖</p>
<p class="price">￥199</p>
</div>
<div class="produce">
<a href="#"><img src="images/picture3.png"></a>
<p class="produce-describe">ESPRIT女装秋通勤纯色斜挎包翻盖包</p>
<p class="price">￥499</p>
</div>
<div class="produce">
<a href="#"><img src="images/picture5.png"></a>
<p class="produce-describe">天堂伞3311E碰晴雨伞强力拒水三折伞</p>
<p class="price">￥39</p>
</div>
<div class="produce">
<a href="#"><img src="images/picture3.png"></a>
<p class="produce-describe">ESPRIT女装秋通勤纯色斜挎包翻盖包</p>
<p class="price">￥499</p>
</div>
<div class="produce">
<a href="#"><img src="images/picture5.png"></a>
<p class="produce-describe">天堂伞3311E碰晴雨伞强力拒水三折伞</p>
<p class="price">￥39</p>
</div>
</div>
<!-- 用来清除浮动，否则父元素会因为produce和left-produce浮动不占文档流而塌陷，设置背景颜色时不会将其包含其中
<div style="clear:both"></div>
-->
</div>