怎样使float元素超过父元素的width强制不换行？

Question

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

ul{width:100px;}
ul li{float:left;width:40px;height:40px;background:red;border-right:2px solid blue;}

浮动元素有没有像white-space: nowrap;一样强制不换行的属性？

Answer 1

换个思路，可以在ul外部嵌套个div，ul设置宽一点，但是外层div还是100px即可。

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<style>
div{width:100px;}
div ul{width:9999px;}
ul li{float:left;width:40px;height:40px;background:red;border-right:2px solid blue;}
</style>

Answer 2

题主的思路应该转变一下，浮动主要是拿来做图片文字环绕效果的，你想把li并排，用inline-block,table-cell,flex等方案效果都非常好，没必要钻牛角尖。

ul{width:100px;white-space:nowrap}
ul li{display:inline-block;width:40px;height:40px;background:red;border-right:2px solid blue;}

另外，关于浮动元素如何定位，css的规范是这样的，
https://www.w3.org/TR/CSS21/visuren.html...
其中第7点表明，你这种情况，按照规范就是要换行的。

Answer 3

转成行内块级元素，display: block;