html - 为什么将 ul 向右浮动时 div 没有出现在下一行？

Question

我想在单独的行中执行 ul 和 div 并且 ul 应该显示在右下角。当我在 ul 和 li 上使用 float 属性时，它会转到右侧，但 div 也会出现在上面的行中，为什么我很高兴还使用了 ul 的 :after 和 :before 并且也使用了 clear 属性，但没有得到正确的输出。

https://jsfiddle.net/rawat/4kd4y2zz/

HTML:

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
<div>
    Hello Its a Full Article
</div>

CSS:

ul{
    float:right;
    margin:0;
    padding:0
    display:block;
    list-style:none;    
}
ul:after, ul:before{
    content:"";
    display:table;
    clear:both;
}
ul li{
    margin-left:10px;
    float:left;
    display:inline-block;
}
div{
    display:block;
    width:100%;
}

Answer 1

将 clear: both(或 right)放入 div。

div {clear: both}

https://jsfiddle.net/4kd4y2zz/1/