CSS响应式图像技术之谜

Question

我一直在研究一些响应式图像技术，并遇到了一件让我感到困惑的事情。

我有一张图片包裹在容器内的 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 是如何把所有东西放在一起的呢？

提前致谢。

Answer 1

float 元素自动使其成为 block 元素。 Here's an article talking about implied blocks .

如果你没有 float <a>显示为无法设置宽度的跨度，因此 <a>扩展以适合内部图像的实际大小。