溢出隐藏/可见搞乱了我的观点

Question

我很困惑为什么我的段落不是基于前一个元素的overflow属性在新行开始的。

查看我的plunker，将line 11中的溢出属性更改为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;}