CSS响应式图像技术神秘

我一直在搞一些响应式图像技术，并遇到一件让我困惑的事情。CSS响应式图像技术神秘

我有包裹在一个容器内的href标签的图像。容器是一个容器，可以将所有东西放在一起。 href标记用作定义了特定大小的图像容器。然后将图像width设置为100％以适合其容器。

下面的代码：

The HTML: 
--------- 
<div class="img-conatiner"> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
</div> 

The CSS 
------- 
body { 
    width: 90%; 
    margin: 0 auto; 
    background: tomato; 
} 

.img-grid { 
    width: 20%; 
    float: left; <-- what is this for? 
    padding: 10px; 
    -webkit-box-sizing: border-box; 
} 

.img-grid img { 
    width: 100%; 
}

例子：http://jsfiddle.net/TBVWG/2/

这里的东西，没有float，这种技术是不行的，图像炸毁到原来的大小，而忽略的宽度父容器。但是float如何保持一切？

在此先感谢。

来源

2013-10-24 Bobby