float元素嵌套input宽度计算问题

其实你用审查元素orFireBug看的话你会发现其实input[2]（姑且让我这么称呼它）的实际width是100%的，而不是你所谓的默认宽度。

这里就要问了，为什么明明width:50px设置在后面，反而得到的是前面的width:100%这个值呢？这里需要注意的是类似权重（原谅我，我也不太清楚这个应该怎么称呼）的东西CSS选择器的优先级。仔细看你的CSS你会看到你设置width:100%的标签用了input.text两个标签，而设置width:50px只用了.input一个标签。这样做，无形中就把input.text的权重增大了，也就是说把它变得更优先了，所以解析器默认使用了width:100%这个参数。

好了，到这里，给你一个意见，把.input改成.input.text，看看会发生什么？

解决了这个，我们来继续看看问题。为什么width:100%参数生效了，可是宽度还是默认的呢？这只有一个可能，那就是包裹它的标签的宽度有问题。我们往上看一下，发现你对包裹input标签的div父标签设置了float:left这个属性。通过搜索，我们会发现，float参数具有破坏div标签宽度的作用（搜索了一下，发现很多专题讲述float的都很复杂，这里给一个直接简单的地址：http://my.oschina.net/jing31/blog/6601）。

你又继续问了一个问题，为何这里的100%和auto是一样的效果呢。这里就要对100%进行解释。width为100%的话实际上应该理解为宽度为其父元素的100%宽度。但是我们又知道，父元素的宽度被float属性破坏了，其实际宽度应该是其子元素被撑大后的宽度。也就是说width:100%找不到比较对象了，不知道是谁的100%了（这里可能理解的不是那么准确）。所以浏览器解释成了auto。这里，你可以试验的将width:100%修改成width:300px，看看会发生什么？或者你在div父标签中填充点文字进去，看看又会发生什么？

再次新加的内容可以很好的看上一段粗体的这个解释，应该是正常的情况。由于内部有文字所以div的宽度存在了基数，有了比较对象。没有文字的情况下，你可以这么理解，父元素的宽度靠子元素决定，子元素的宽度靠父元素决定，然后陷入死循环，然后浏览器疯了，然后浏览器就傲娇了，不知所措了，就给了默认的值了（这种情况应该挺正常的吧←_←）。

好了，到这里问题应该解决了。最后结果是width:100%优先级高于width:50px而应用到了标签中，但是由于父标签的width变成了最小，所以被包裹的input也变成了默认的了。这里在给个意见，如果把父标签的float参数取消，看看又会发生什么呢？