溢出隱藏/可見混亂了我的視圖

Question

我很困惑，爲什麼我的段落不是基於前一個元素的溢出屬性的新行開始。

查看我的plunker，將line 11中的overflow屬性更改爲hidden，它會正常工作。在visibile上，它將視圖擰緊。

我知道做一個clearfix可以解決這個問題，但我感興趣的是爲什麼溢出是這樣做到我的看法;

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    overflow: visible; /* Change this to visible/hidden*/ 
} 

Answer 1

讓我清楚你的東西溢出：隱藏使UL清楚，因爲它是:after{clear:both;content:"";display:block;} 較短的形式，但在overflow:hidden它清除它的自我，並把它的高度，但什麼都不會顯示在此之外。

在這個例子中，你有浮動元素和父母UL沒有采取其寬度和高度，這就是爲什麼段落旁邊。當您添加overflow:hidden然後UL採取它的高度和寬度，因爲它是更短的形式具有佈局屬性:after{clear:both;content:"";display:block;}

希望如此，你會被這個

由於被清除

Answer 2

的問題是，因爲你的UL有float: left;文本元素默認在其右側。因此，當您添加overflow: hidden;屬性時，它會清除列表中的區域。

還有一個浮動元件great read。

Answer 3

這是由於屬性爲而留下的屬性。 刪除溢出屬性ul，它會工作出色。

在CSS中添加以下屬性：

ul{ font-size:0px;} 
ul li{ vertical-align:top; display:inline-block;} 
ul li a{ font-size:16px; float:none;}