                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮动

为什么会错开半行，想知道其中的原理，请大神赐教，拜谢?

<style>
	nav { height: 50px; background: #ccc; }
	ul { display: inline-block; list-style: none; height: inherit;line-height: 50px;}
	li { display: inline-block; height: inherit;line-height: 50px; }
</style>
<nav style="height: 50px;">
	<ul>
		<li style="float: left">1</li>
		<-- ul下的li，如果是唯一的元素，并且定义了左浮动或者右浮动，那此ul元素后面的兄弟元素就会错开半行的距离。死活也想不通其中的原因，还请各位大神指教。 -->
<!-- 	<li>2</li>
		<li>3</li>
		<li style="float: right">4</li> -->
	</ul>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</nav>