Css新手样式问题。。浮动

Question

用这个来测试
https://www.w3school.com.cn/t...

把下面这段贴进去..

<STYLE TYPE="text/css">
li {float:left;}
li.tt{float:none;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

//-->
</SCRIPT>
<ul id="aa">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li class="tt">测试4，这个li结束时我想换行</li>
<li>测试5</li>
<li>测试6，这个li结束我又不想换行</li>
<li>测试7</li>
</ul>

问题：为什么float:none可以实现li4后面的换行，而用clear:right就不行。。

Answer 1

1. float: none可以实现换行，是因为none表示不浮动，然后li本身是块级元素，所以会紧挨着前面3个li独占一行剩下的部分。
2. clear: right是不行的，但是clear:left可以，而且应该设置在li5上面。clear: left表示左侧抗浮动，就是不受前面左浮动元素的影响，所以li5会换行显示。具体请参考：准确理解CSS clear:left/right的含义及实际用途

Answer 2

clear 属性只针对改元素前面（html结构）的元素却不会考虑其后的元素（html文档渲染原则，从上到下，从左到右，因此float这类早期布局里前面元素渲染前并不知道后面元素如何），通常情况下clear: both就行了，因为left/right只会生效一个值。
float:none 意味着本li元素正常显示，即显示为块状元素，自然引起换行了，后面的浮动自然也会在新的一行。

Answer 3

懂了..
1.float:none消除了float对下一个元素的影响
2.clear只对自己起作用..