百分比布局中 浮动的小bug

完成下面的布局:

思路 代码是这样的:

html:

<!-- 特色超市 -->

< div class= "feature">

< div class= "ft_title good_title">特色超市</ div>

< div class= "ft_content">

< a href= "javascrpt:;">

< img src= "./uploads/market_1.jpg" alt= "">

</ a>

< a href= "javascrpt:;">

< img src= "./uploads/market_2.jpg" alt= "">

</ a>

< a href= "javascrpt:;">

< img src= "./uploads/market_3.jpg" alt= "">

</ a>

< a href= "javascrpt:;">

< img src= "./uploads/market_4.jpg" alt= "">

</ a>

< a href= "javascrpt:;">

< img src= "./uploads/market_5.jpg" alt= "">

</ a>

</ div>

</ div>

css:

< style>

.feature .ft_content a {

float: left;

width: 50 %;

}

.feature .ft_content a img {

Width: 100 %

}

</ style>

这样可以实现布局, 

 bug   是(看下图)页面缩放时会出现这样的效果:  一张图片被挤下去了.

原因是(看下图)  : 在缩放时 2号+3号的高度 < 1号的高度 , 4号浮动时就会跑到 3号下面

解决办法是:1, 在4号盒子上加 clear:both

                  2, 给3号盒子加1px的padding-bottom