Question

关于overflow:scroll失效的原因！

<div style="height:400px; width:400px; overflow-x:scroll; overflow-y:hidden;">
<div style="width:400px; height:200px; border:1px solid red; float:left;"></div>
<div style="width:400px; height:300px; border:1px solid red; float:left;"></div>
</div>
代码如上，为什么没有出现横向滚动条！内层明明已经设置了float:left却失效了！大神求解答啊！

Answer 1

如果想要横向的滚动条出现，要将你展示的内容层定一个比外层宽的像素就可以了。

追问

我只想知道，为什么，浮动会失效！

追答

浮动没有失效，只是你的外层div的宽度有限制了，外层满足不了内层的需求，所以自动换成第二行的左浮动了。改变外层就可以看到效果了。

追问

改变外层，那就不是我想要的了！

Answer 2

<div style="height:400px; width:400px; overflow-x:scroll; overflow-y:hidden;">
<div style="width:800px;">
<div style="width:400px; height:200px; border:1px solid red; float:left;"></div>
<div style="width:400px; height:300px; border:1px solid red; float:left;"></div>
</div>
</div>