为什么我们需要浮动：留在这个标题中？

Question

＆＃13;

＆＃13;

.header2
{
   background-color:#CDD1CD; /*have to change */
   /*padding: 15px 0;*/
}

.header1 
{
    background-color: #60db60; /* have to change */
	padding: 10px 0;
}

/*Fixed header properties */
.fixed 
{
    position: fixed;
    top:0; left:0;
    width: 100%; 
}

.right
{
  float: right;
}

＆＃13;

<div class="headers header1" id="header1">
	    <div class="logo"></div>
		<div class="slogan"></div>
	 </div>
	 
	 <div class="headers header2 clearboth" id="header2">
	     <nav class="login_links">
			<ul>
			   <li>Are you a member?</li>
			   <li><a>Register</a></li>
			   <li><a>login</a></li>
			</ul>
		 </nav>
	 </div>

＆＃13;

＆＃13;

＆＃13;

您可以看到两个标题之间的差距。如果我将float:left提供给nav，则会修复此问题。可能是什么原因？有什么可能性。

编辑：

经过一些编辑后，我发现它是由ul元素margin引起的。

ul
{
 margin: 0;
}

这个保证金来自哪里？

Answer 1

ul标记有默认边距。有关更全面的讨论，请参见此处：

Unordered List (<ul>) default indent

ul {
    margin:0px;
}

一目了然，原因在于我们的技术没有达到先进水平时的向后兼容性。