溢出隐藏/可见混乱了我的视图

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;}