将ul浮动到右边时为什么div不会出现在下一行？

Question

我想做ul并且div在一个单独的行中,并且ul应该显示在右上角.当我使用float属性上UL和li其转到右侧,但div也谈到上述行,为什么它happing我也用:after和:before的ul和使用的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(或右)div.

div {clear: both}

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