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

Question

我从头开始创建了一个响应式模板。

我的模板的当前状态在这里（在我的问题下方）：http://jsfiddle.net/w0p9jhbf/

我的问题出在 @media screen and (min-width:67em) {...} 那里，我试图做出严肃的漂浮动作。

我验证了我的 HTML 代码，检查了是否有任何遗忘的 R&L 边距，将元素的宽度减小到非常低的值，但我无法解决我的问题。我还使用了 chrome 和 ie 的检查元素屏幕，但这些也没有帮助我。 CSS 验证给出了 1 个与我的案例无关的错误。（关于 url(data:image/gif;base64 ... 的使用错误）

我想要的视图是：

导航在左侧垂直（屏幕左侧）
主要部分在导航的右侧（中间）
搜索框位于主屏幕右侧（屏幕右侧）
aside 位于搜索框下方（屏幕右侧）

你能帮我找出问题所在吗？处理了 ~3 晚后，我的脑海里没有任何想法。

重要说明： 如您所见，我使用下面的代码部分得到border-box。此代码对所有响应状态均有效。

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;
}

提前致谢最好的问候

HTML

赛法·巴斯利克

<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>
<main id="main" role="main" class="clearfix">
    <div id="ana">
        <ul id="#dkr">
            <li class="dd d1">
                <article>
                    <h1 class="artit">Yazı 1 Başlık</h1>
                    <ul class="aul">
                        <li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
                        <li class="trh">26.12.2015</li>
                        <li class="yrm">0 Yorum</li>
                    </ul>               
                    <p class="tntm">tanıtım cümleleri</p>
                    <figure></figure>
                    <p class="intro">yazıdan introAnahtarları başkalarında olan ve hep öyle kalacak olan kapıların bir bir kapanmakta olduğunu, muradına erme şansının artık tükendiğini idrak eden keloğlanın dramına benziyor bu. Erilemeyen murat, tarihe Muhteşem Falanca diye geçme hayali belli ki.Ama antropolojiden yardım almaksızın sosyolojiye giriş yapmak da zor sanki. İnsanın evrimleşme hızı teknolojinin epeyce gerisinde kalıyor. Uzaktakine sesimizi duyurmak için mikrofonu ağzımıza yaklaştırmak yeterliyken bile, hâlâ dağdan dağa seslenircesine bar bar bağırıyoruz. İstila edercesine çoğalıp yayılan teknolojik imkânlar hayatımızı hangi yönden kolaylaştırdı bilemiyorum ama gittikçe artan bir bağırtı ve kakofoni denizinde boğulduğumuz kesin. Gene de şunca lâfazanlık ve slogan denizini yarıp ortasından geçen bir yol bulmaya, sözü evirip çevirmeden en temel soruyu sorarak meselenin adını koymaya çalışalım:</p>
                    <ul class="ktg clearfix">
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                    </ul>
                    <a class="to" href="#" rel="bookmark">Tümünü Oku</a>
                </article>              
            </li>
            <li class="dd d2">
                <article>
                    <h1 class="artit">Yazı 1 Başlık</h1>
                    <ul class="aul">
                        <li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
                        <li class="trh">26.12.2015</li>
                        <li class="yrm">0 Yorum</li>
                    </ul>               
                    <p class="tntm">tanıtım cümleleri</p>
                    <figure></figure>
                    <p class="intro">yazıdan intro</p>
                    <ul class="ktg clearfix">
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                    </ul>
                    <a class="to" href="#" rel="bookmark">Tümünü Oku</a>
                </article>              
            </li>
            <li class="dd d3">
                <article>
                    <h1 class="artit">Yazı 1 Başlık</h1>
                    <ul class="aul">
                        <li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
                        <li class="trh">26.12.2015</li>
                        <li class="yrm">0 Yorum</li>
                    </ul>               
                    <p class="tntm">tanıtım cümleleri</p>
                    <figure></figure>
                    <p class="intro">yazıdan intro</p>
                    <ul class="ktg clearfix">
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                    </ul>
                    <a class="to" href="#" rel="bookmark">Tümünü Oku</a>
                </article>              
            </li>
            <li class="dd d4">
                <article>
                    <h1 class="artit">Yazı 1 Başlık</h1>
                    <ul class="aul">
                        <li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
                        <li class="trh">26.12.2015</li>
                        <li class="yrm">0 Yorum</li>
                    </ul>               
                    <p class="tntm">tanıtım cümleleri</p>
                    <figure></figure>
                    <p class="intro">yazıdan intro</p>
                    <ul class="ktg clearfix">
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                    </ul>
                    <a class="to" href="#" rel="bookmark">Tümünü Oku</a>
                </article>              
            </li>
            <li class="dd d5">
                <article>
                    <h1 class="artit">Yazı 1 Başlık</h1>
                    <ul class="aul">
                        <li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
                        <li class="trh">26.12.2015</li>
                        <li class="yrm">0 Yorum</li>
                    </ul>               
                    <p class="tntm">tanıtım cümleleri</p>
                    <figure></figure>
                    <p class="intro">yazıdan intro</p>
                    <ul class="ktg clearfix">
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                    </ul>
                    <a class="to" href="#" rel="bookmark">Tümünü Oku</a>
                </article>              
            </li>
            <li class="dd d6">
                <article>
                    <h1 class="artit">Yazı 1 Başlık</h1>
                    <ul class="aul">
                        <li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
                        <li class="trh">26.12.2015</li>
                        <li class="yrm">0 Yorum</li>
                    </ul>               
                    <p class="tntm">tanıtım cümleleri</p>
                    <figure></figure>
                    <p class="intro">yazıdan intro</p>
                    <ul class="ktg clearfix">
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                    </ul>
                    <a class="to" href="#" rel="bookmark">Tümünü Oku</a>
                </article>              
            </li>
            <li class="dd d1">
                <article>
                    <h1 class="artit">Yazı 1 Başlık</h1>
                    <ul class="aul">
                        <li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
                        <li class="trh">26.12.2015</li>
                        <li class="yrm">0 Yorum</li>
                    </ul>               
                    <p class="tntm">tanıtım cümleleri</p>
                    <figure></figure>
                    <p class="intro">yazıdan intro</p>
                    <ul class="ktg clearfix">
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                    </ul>
                    <a class="to" href="#" rel="bookmark">Tümünü Oku</a>
                </article>              
            </li>
            <li class="dd d2">
                <article>
                    <h1 class="artit">Yazı 1 Başlık</h1>
                    <ul class="aul">
                        <li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
                        <li class="trh">26.12.2015</li>
                        <li class="yrm">0 Yorum</li>
                    </ul>               
                    <p class="tntm">tanıtım cümleleri</p>
                    <figure></figure>
                    <p class="intro">yazıdan intro</p>
                    <ul class="ktg clearfix">
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">kategori</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                        <li><a href="" rel="bookmark">etiket</a></li>
                    </ul>
                    <a class="to" href="#" rel="bookmark">Tümünü Oku</a>
                </article>              
            </li>
        </ul>
    </div>
</main>
<aside id="aside">
<h1>ASIDE ASIDE ASIDE</h1>
<p>
ghfdhsjf hdfjdgf djfhsdjfh dhsfd hjdfgd jsfsdj djfj df s sdf jdfdjsdf d hdfsdfgsdj jdfgdjhgd hjgfj gj hdgfjgf jhgsdfjgj jgdhjgf jhfj sdhgfj df fd sd sdfhsf jhdfgjdhjsfdg djgdjf djg jjg djghj sf jhsdfgsdjf jhgdflgu g fdhsgdhf jsf dfgjsdghf jdgsfdf jfjsdgfjgdfh fjsdgfjddygsfj dsjg jdgf djfhsdjfh dhsfd hjdfgd jsfsdj djfj df s sdf jdfdjsdf d hdfsdfgsdj jdfgdjhgd hjgfj gj hdgfjgf jhgsdfjgj jgdhjgf jhfj sdhgfj df fd sd sdfhsf jhdfgjdhjsfdg djgdjf djg jjg djghj sf jhsdfgsdjf jhgdflgu g fdhsgdhf jsf dfgjsdghf jdgsfdf jfjsdgfjgdfh fjsdgfjddygsfj dsjg  jfhsdjfh dhsfd hjdfgd jsfsdj djfj df s sdf jdfdjsdf d hdfsdfgsdj jdfgdjhgd hjgfj gj
</p>
</aside>
<footer id="footer" role="contentinfo">
    <small>Copyright &copy; <time datetime="2015">2015</time></small>
</footer>

</body>

CSS

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block;
}

audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

mark {
    color: #000;
}

sub,sup {
    line-height: 0;
    position: relative;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

svg:not(:root) {
    overflow: hidden;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,kbd,pre,samp {
    font-family: monospace,monospace;
}

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,select {
    text-transform: none;
}

button,html input[type=button],input[type=reset],input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type=checkbox],input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    height: auto;
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: 700;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a:link {
    color: #41b7d8;
}

a:visited {
    color: #41b7d8;
}

a:focus,a:hover {
    color: #e53a2b;
}

a:active {
    color: #fff;
    background-color: #e53a2b;
}

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
}

small {
    font-size: 80%;
}

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;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    display:inline-block;
}

.clearfix:after,.clearfix:before {
    content: "";
    display: table;
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

body {
    background-image: url(data:image/gif;base64,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);
}

label {
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* CUSTOM */

/* font-size:0 resim ile link yüksekliğini aynı yapıyor */
/* display:table-cell olmazsa dikine ortalama yapmıyor*/
.current {
    font-size: 0;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#hk,#il,#ht {
    display: none;
}

.di {
    float: left;
    line-height: 1em;
    border: 1px solid rgba(0,0,0,.05);
    border-left: 0;
    width: 25%;
    text-align: center;
}

.dia {
    padding-top: 1.625em;
    padding-bottom: 1.625em;
    display: block;
}

.pen {
    padding-top: 2.5em;
    padding-bottom: .75em;
    display: block;
}

#hi .pen {
    background-image: url(../resimler/ikon/selamlayan-kalem.png);
    background-repeat: no-repeat;
    background-position: top right;
}

.nw a:link,.nw a:visited {
    color: rgba(0,0,0,.3);
}

.current:hover,.nw a:focus,.nw a:hover {
    color: rgba(0,0,0,.6);
    background-color: #ff6;
}

.nw a:active {
    color: #fff;
    background-color: #e53a2b;
}

#araf1_btn,#araf1_inp {
    border: .08em solid rgba(0,0,0,.1);
    font-size: .875em;
    line-height: 1.125em;
    height: 2.5em;
    float: left;
    padding: 0 .25em;
    margin: 0;
}

#araf1_inp {
    width: 85%;
    border-top-left-radius: .625em;
    border-bottom-left-radius: .625em;
}

#araf1_btn {
    width: 15%;
    background-color: #e53a2b;
    color: #fff;
    border-left: 0;
    border-top-right-radius: .625em;
    border-bottom-right-radius: .625em;
}

#araf1_label {
    display: none;
}

#araf1, #aside, #main {
    background-color: #fff;
}

.artit {
    font-size: 2em;
    font-family: Georgia,'Times New Roman',Times,serif;
}

.tntm,.yzn {
    font-size: 1.25em;
    font-family: Georgia,'Times New Roman',Times,serif;
}

.yzn {
    display: block;
    border-bottom: .08em solid #e5e5e5;
}

.ktg li {
    float: left;
}

/* layout */

#aside,#main,#header,.dd article { overflow:hidden; }

#araf1 {
    padding-top: 1em;
}

.dd article,#araf1 {
    padding-left: 2%;
    padding-right: 2%;
}

.dd article {
    border-bottom: .25em solid #41b7d8;
    padding-top: 2em;
    padding-bottom: 2em;
}

#aside,#footer {
    padding: 2em 2%;
}

/* viewport */

@media screen and (min-width:26em) {

    #il {display:block;}
    .di {width:20%;}

}
@media screen and (min-width:29em) {

    #hk {display:block;}
    .di {width:16.66667%;}

}
@media screen and (min-width:31em) {

    #ht {display:block;}
    .di {width:14.28571%;}

}
@media screen and (min-width:37em) {

    #araf1 {
        position: relative;
        left: 54%;
        bottom: 8em;
        width: 45%;
        background-color: transparent;
        padding: 0;
    }

    #main {
        margin-top: -2.1875em; /* height of search form */   
    }

}

@media screen and (min-width:48em) {

    .dd {
        padding-left:10%;
        border-left-width: .625em;
        border-left-style: solid;
    }
    .d1 { border-left-color: #c9e9e5; }
    .d2 { border-left-color: #cdeeaa; }
    .d3 { border-left-color: #f9f0a8; }
    .d4 { border-left-color: #e0cfdf; }
    .d5 { border-left-color: #faced2; }
    .d6 { border-left-color: #bcd8f0; }
    .dd article {
        padding-left: 0%;
        padding-right: 8%;
    }
}
@media screen and (min-width:67em) {
    .dd {
        padding-left:0;
        border-left-width: 0;

    }
    .dd article {
        padding-left: 2em;      
        padding-right: 1.5em;
    }
    .current,.di {
        display: block;
        float: none;
        width:12em;
        line-height:1em;
        border:0;
    }
    .current {
        font-size:1em;
        border-bottom:.0625em solid rgba(0,0,0,.05);
        padding-top:1em;
        padding-bottom:1em;
        background-color:#fff;
        border-top-left-radius:.625em;
    }
    .di {
        border-bottom:.0625em solid rgba(0,0,0,.05);
        border-right:.0625em solid rgba(0,0,0,.05);
        text-align:left;
    }

    .dia {
        padding: 1.5em 0 1.5em 4em;
    }   

    .pen {
        padding: 1.5em 1em 1.5em 2em;
    }
    #nav {
        width: 12em;
    }

    #araf1 {
        left:0;
        bottom:0;
        margin-top:3em;
    }
    #main {
        margin-top:0;       
        padding-bottom:2em;
    }
    #main,#nav {
        float: left;
        margin-top: .625em;
    }
    #main {
        width: 58%;
        padding-top: 2.8125em;
        border-radius: 0 .625em .625em;
    }

    #araf1,#aside {
        float: right;
        width: 42%;
        margin-left: -12em;
        padding-left: 13em;
        background-color: transparent;
        padding-right: .5%;
    }

    #araf1_label {
        display: block;
    }
    #footer {        
        clear: both;
    }
}

@media screen and (min-width:70em) {
    .dd {
        padding-left:5%;
        border-left-width: .625em;
        border-left-style: solid;   
    }
    .dd article {
        padding-left: 0;
        padding-top:0;
        padding-right:5%;
    }
    #ana {
        padding-top:2.4375em;
    }
}
@media screen and (min-width:80em) {
    .dd {
        padding-left:8%;    
    }
    .dd article {
        padding-right:8%;
    }
}
@media screen and (min-width:90em) {
    .dd {
        padding-left:10%;   
    }
    .dd article {
        padding-right:10%;
    }
}
@media screen and (min-width:100em) {
    #araf1,#aside {        
        padding-left: 15em;
        padding-right: 1.5%;
    }
}

Answer 1

从 #aside,#main,#header,.dd article { overflow:hidden; } 中删除 #header 后，案例已解决。

我不明白为什么这个动作解决了我的案子。

可能的原因有：

#header 中的浮动块级元素（#nav 和 #araf1）已经有 .clearfix
我向左浮动 #nav，向右浮动 #araf1，所以可能不应该隐藏溢出。

正如我所说，我解决了 'what' 但无法得到 'why'。最好的问候

<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>

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

Float doesn't work as expected despite adequate space exist

html

css

css-float

HTML

CSS