父元素相对定位，子元素左浮动失效

Question

我的本意是想做一个左右滑动的图片轮播，想让ul中的图片横向排列。
这是初始代码。

<style>
.x1{width: 300px;height: 300px;background: yellow;overflow:hidden;}
li{float: left;}
img{width: 200px;;}
</style>

<div class="x1">
    <ul>
        <li><img src="1.jpeg" alt=""></li>
        <li><img src="1.jpeg" alt=""></li>
        <li><img src="1.jpeg" alt=""></li>    
    </ul>
</div>

这个代码确实实现了左浮动，然而父元素的overflow：hidden却失效了。
于是，我给.x1加了相对定位，overflow：hidden生效了，左浮动却失效了。
代码如下：

<style>
.x1{position: relative;width: 300px;height: 300px;background: yellow;overflow:hidden;}
li{float: left;}
img{width: 200px;;}
</style>

<div class="x1">
    <ul>
        <li><img src="1.jpeg" alt=""></li>
        <li><img src="1.jpeg" alt=""></li>
        <li><img src="1.jpeg" alt=""></li>    
    </ul>
</div>

请问改怎么解决呢？让父元素的overflow hidden生效，同时子列表左浮动也生效？

谢谢

Answer 1

ul没有宽，li浮不上去，给ul设宽，为三张图片的总宽

Answer 2

使用第一种方法给 ul 添加宽度且大于所有子元素宽度之和，即：

ul{
    width: 600px;    /* 至少宽度为 200 * 3 = 600 */
    overflow: hidden;    /* 主要为了清除子元素浮动对 ul 的影响 */
}

解答：首先你给 div 加了宽度、高度定义盒子的大小，ul 是块元素，宽度默认为 100%(300px)，而 ul 的子元素 li 使用了 float 属性，所有 li 宽度加起来为 600px > 300px，所以浮动根本看不出效果，通俗点说 li 元素是挤不上去，因为 float:left 会依次往左靠拢，并不会完全脱离正常布局流，这个时候如果设置 ul 宽度大点，li 自然就可以往上挤进去并排成一行。