html - フローティング要素の width auto と width 100% の差

Question

width auto と width 100% の違いの回答で指定されているように、width auto は全幅を使用しますが、このデモでは width auto は全幅を使用しませんが、これに 100% を適用すると全幅のみが使用されます。width auto は実際にその要素をどのように取りますか?

デモの概要

html

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS

ul{background-color: gray;}
li{background-color: red; float: left; clear: left; width: auto;}

Answer 1

li問題は、要素のフローティングです。

そのようにcssからフローティング部分を削除すると:

ul{background-color: gray;}
li{background-color: red; width: auto;}

その後、正常に動作します。