爲什麼當div浮動到右邊時div不會進入下一行？

Question

我想在一個單獨的行中執行ul和div，並且ul應顯示在右上角。當我使用float財產上的UL和li其轉到右側，但div還配備上述行，爲什麼它happing我也用的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（或右）div。

div {clear: both} 

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

Answer 2

嘗試這樣的：Demo

CSS：

在DIV + CSS

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

Answer 3

認沽以下屬性：

clear:both; 

Answer 4

有使用它可以達到預期的結果幾個方面

CSS

div { 
    clear:both 
} 

ul:after{ 
    content: ''; 
    display:block ''; 
    clear:both; 
} 

或者你可以用樣式添加一個額外<div></div>到您的DOM clear:both