Html 尽管存在足够的空间，但Float无法按预期工作

我从头创建了一个响应模板

我的模板的当前状态如下所示：

我的问题是在@media screen和min-width:67em{…}中，我试图进行严重的浮动操作

我验证了我的HTML代码，检查是否有忘记的R&L边距，将元素的宽度减少到非常低的值，但我无法解决我的问题。 我也使用了chrome和ie的inspect element屏幕，但这些也帮不了我。CSS验证给出1个与我的案例无关的错误。使用urldata时出错：image/gif；base64

我的看法是：

导航在屏幕的左侧是垂直的 主体部分位于导航中间的右侧 搜索框位于屏幕主右侧的右侧 旁白位于屏幕右侧搜索框的下方 你能帮我找出哪里不对劲吗？经过3个晚上的处理，我脑子里一点也不知道

重要提示：如您所见，我使用下面的代码部分创建边框框。此代码适用于所有响应状态

article,aside,div,form,header,input[type=submit],input[type=text],li,main,nav,section,textarea,ul,footer {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

提前谢谢 致意

<header  id="header" role="banner">  
    <nav id="nav" role="navigation">
        <ul class="nw clearfix">
            <li class="current"><a style="border: 0px;" rel="home" href="#" title=""><img  src="http://www.okobe.co.uk/images/scr/P/89/3/1000020389/M01.jpg" alt="logo" /></a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/arşiv" title="">Arşiv</a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/etiketler" title="">Etiketler</a></li>
            <li class="di" id="hi"><a class="pen" rel="bookmark" href="/yazıya-davet" title="">Sen de!</a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/yorumlar" title="">Yorumlar</a></li>
            <li class="di" id="il"><a class="dia" rel="bookmark" href="/iletişim" title="">İletişim</a></li>
            <li class="di" id="hk"><a class="dia" rel="bookmark" href="/hakkında" title="">Hakkında</a></li>
            <li class="di" id="ht"><a class="dia" rel="bookmark" href="/harita" title="">Harita</a></li>                
        </ul>
    </nav>
    <form id="araf1" class="clearfix"  role="search" method="post" action="#">
      <label id="araf1_label" for="araf1_inp">Google ile ara</label>
      <input id="araf1_inp" type="text" name="aranan"  placeholder="Örneğin: Rosa Parks" />
      <input id="araf1_btn" name="aradugme" type="submit" value="Ara">
    </form> 
</header>

HTML 沙伊法·巴伊尔克

从旁边删除标题后，main、header、.dd article{overflow:hidden；}案例已解决

我不明白为什么这次行动解决了我的案子

可能的原因是：

标题中的浮动块级别元素nav和araf1已具有.clearfix 我向左浮动导航，向右浮动araf1，所以可能溢出不应该被隐藏。 正如我所说，我解决了“什么”问题，但无法理解“为什么”。 致意

<header  id="header" role="banner">  
    <nav id="nav" role="navigation">
        <ul class="nw clearfix">
            <li class="current"><a style="border: 0px;" rel="home" href="#" title=""><img  src="http://www.okobe.co.uk/images/scr/P/89/3/1000020389/M01.jpg" alt="logo" /></a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/arşiv" title="">Arşiv</a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/etiketler" title="">Etiketler</a></li>
            <li class="di" id="hi"><a class="pen" rel="bookmark" href="/yazıya-davet" title="">Sen de!</a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/yorumlar" title="">Yorumlar</a></li>
            <li class="di" id="il"><a class="dia" rel="bookmark" href="/iletişim" title="">İletişim</a></li>
            <li class="di" id="hk"><a class="dia" rel="bookmark" href="/hakkında" title="">Hakkında</a></li>
            <li class="di" id="ht"><a class="dia" rel="bookmark" href="/harita" title="">Harita</a></li>                
        </ul>
    </nav>
    <form id="araf1" class="clearfix"  role="search" method="post" action="#">
      <label id="araf1_label" for="araf1_inp">Google ile ara</label>
      <input id="araf1_inp" type="text" name="aranan"  placeholder="Örneğin: Rosa Parks" />
      <input id="araf1_btn" name="aradugme" type="submit" value="Ara">
    </form> 
</header>

---

你能缩短你的代码吗？特别是，在您的问题中完全没有必要包含整个数据URI。我试图缩短，但破坏了结构完整性。我试着模拟，但我不能。让我再试一次，但我希望JSFIDLE链接能让问题解决者的思考更容易。抱歉，代码太长。感谢您的评论。fiddle代码应该保持不变，但没有必要在这里的问题中包含fiddle中的所有代码，因为我确定不是所有代码都对手头的问题至关重要。除了数据URI示例之外，我们也不需要知道您正在使用normalize.css。有很多行是可以删掉的。我一行一行地删除，我处理了这行：aside，main，header，.dd article{overflow:hidden；}，发现只有header创建了所有模糊。现在我解决了我的案子，但我不明白为什么？这是我应该问的另一个问题。我在这个链接上问了为什么：

<header  id="header" role="banner">  
    <nav id="nav" role="navigation">
        <ul class="nw clearfix">
            <li class="current"><a style="border: 0px;" rel="home" href="#" title=""><img  src="http://www.okobe.co.uk/images/scr/P/89/3/1000020389/M01.jpg" alt="logo" /></a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/arşiv" title="">Arşiv</a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/etiketler" title="">Etiketler</a></li>
            <li class="di" id="hi"><a class="pen" rel="bookmark" href="/yazıya-davet" title="">Sen de!</a></li>
            <li class="di"><a class="dia" rel="bookmark" href="/yorumlar" title="">Yorumlar</a></li>
            <li class="di" id="il"><a class="dia" rel="bookmark" href="/iletişim" title="">İletişim</a></li>
            <li class="di" id="hk"><a class="dia" rel="bookmark" href="/hakkında" title="">Hakkında</a></li>
            <li class="di" id="ht"><a class="dia" rel="bookmark" href="/harita" title="">Harita</a></li>                
        </ul>
    </nav>
    <form id="araf1" class="clearfix"  role="search" method="post" action="#">
      <label id="araf1_label" for="araf1_inp">Google ile ara</label>
      <input id="araf1_inp" type="text" name="aranan"  placeholder="Örneğin: Rosa Parks" />
      <input id="araf1_btn" name="aradugme" type="submit" value="Ara">
    </form> 
</header>