html - anchor 标记上的 CSS Float 导致元素的大小增加而不是在列表项上使用它

Question

通过在 anchor 标记 a 上使用 float 进行以下设置，它会导致导航尺寸增加(相对于在 li 仅 - 见下文)。这是为什么？

nav {
	background-color: rgb(25,25,25);
	border: 1px solid rgba(255,255,255,.5);
	border-left: none;
	border-right: none;
}
nav ul {
	padding: 0;
	margin: 0;
	overflow: hidden;
}
nav li {
	padding: 0;
	margin: 0;
	list-style: none;
}
nav a {
	float: left;
	font-size: .8em;	
	color: white;
	font-weight: normal;
	text-decoration: none;
	padding: 10px;
	border-right: 1px dashed rgba(255,255,255,.75);
	transition: all .5s;
}

<nav class="clear">
	<ul>
		<li><a href="#">About The Book</a></li>
		<li><a href="#">CSS Properties</a></li>
		<li><a href="#">CSS Tips</a></li>
		<li><a href="#">CSS Gotchas</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

与如下在列表项上使用它相比，菜单不会增加高度

nav {
	background-color: rgb(25,25,25);
	border: 1px solid rgba(255,255,255,.5);
	border-left: none;
	border-right: none;
}
nav ul {
	padding: 0;
	margin: 0;
	overflow: hidden;
}
nav li {
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
}
nav a {
	font-size: .8em;	
	color: white;
	font-weight: normal;
	text-decoration: none;
	padding: 10px;
	border-right: 1px dashed rgba(255,255,255,.75);
	transition: all .5s;
}

<nav class="clear">
	<ul>
		<li><a href="#">About The Book</a></li>
		<li><a href="#">CSS Properties</a></li>
		<li><a href="#">CSS Tips</a></li>
		<li><a href="#">CSS Gotchas</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

Answer 1

a 默认是内联元素。内联元素的垂直填充对布局没有影响——也就是说，它增加了 a 元素的点击区域而不影响它们的行高(或其 float li 的行高) > 元素父级)。但是你的 ul 有 overflow: hidden，它会剪掉你的 a 元素上的垂直填充，这意味着你永远不会真正使用这个额外的点击区域由垂直填充提供。

float 内联框会将其变成 block 框，因此垂直填充现在会影响每个 a 元素的布局，正如您对任何 block 框( float 或非 float )所期望的那样。