爲什麼添加「清除：兩者;」在一排浮動項目清除了內容推送的問題之後？

當我構建2列布局並且每行的第一項浮動到左側時，我遇到了一個問題。如果元素的文本是遠大於預期，該行會打破，被推項目下來，所以不是它看起來像這樣：爲什麼添加「清除：兩者;」在一排浮動項目清除了內容推送的問題之後？

How the layout should look

它看起來像這樣：

How it looks without clear: both;

代碼之中：

<ul class="layout"> 
<li> 
    <article> 
     <div class="thumb"> 
      <img class="img" alt="" src=""> 
     </div> 
     <div class="post-info"> 
      <h3>Hey there! You should make me bigger to break the layout.</h3> 
      <p>Some text here...</p> 
     </div> 
    </article> 
</li> 
<li> 
    <article> 
     <div class="thumb"> 
      <img class="img" alt="" src=""> 
     </div> 
     <div class="post-info"> 
      <h3>Hey there! You should make me bigger to break the layout.</h3> 
      <p>Some text here...</p> 
     </div> 
    </article> 
</li> 
<li> 
    <article> 
     <div class="thumb"> 
      <img class="img" alt="" src=""> 
     </div> 
     <div class="post-info"> 
      <h3>Hey there! You should make me bigger to break the layout.</h3> 
      <p>Some text here...</p> 
     </div> 
    </article> 
</li> 
<li> 
    <article> 
     <div class="thumb"> 
      <img class="img" alt="" src=""> 
     </div> 
     <div class="post-info"> 
      <h3>Hey there! You should make me bigger to break the layout.</h3> 
      <p>Some text here...</p> 
     </div> 
    </article> 
</li>

CSS：

.layout { 
    list-style: none; 
} 

.layout > li { 
    vertical-align: top; 
    width: 49%; 
} 

.layout > li:nth-child(odd) { 
    margin-right: 1%; 
    float: left; 
} 

.layout > li:nth-child(even) { 
    margin-left: 1%; 
    float: right; 
}

哪個有效，但如果我們要延長時間，就會中斷。

如果加上這一行：

.layout > li:nth-child(even) + li { 
    clear: both; 
}

它工作得很好，不管我在它扔。

怎麼回事？

來源

2017-09-14 Daniel Moss

將不勝感激有人聲譽，可以編輯圖像嵌入。 –

添加'float'創建一個新的*塊格式化上下文*應該被清除*說上下文已經結束...參見[this]（https://developer.mozilla.org/en-US/docs/網頁/指南/ CSS/Block_formatting_context） – kukkuz

@kukkuz我明白！但是，我怎麼仍然可以保持浮動：左和明確：兩者;在同一項目上，爲什麼如果我清除每個第三行（第一行）元素，它的工作原理呢？ –

僅針對您的案例中的所有元素使用float: left。

.layout { 
 
    list-style: none; 
 
} 
 
.layout>li { 
 
    vertical-align: top; 
 
    width: 49%; 
 
    float: left; 
 
} 
 

 
.layout>li:nth-child(odd) { 
 
    margin-right: 1%; 
 
} 
 

 
.layout>li:nth-child(even) { 
 
    margin-left: 1%; 
 
}

<ul class="layout"> 
 
    <li> 
 
    <article> 
 
     <div class="thumb"> 
 
     <img class="img" alt="" src=""> 
 
     </div> 
 
     <div class="post-info"> 
 
     <h3>Hey there! You should make me bigger to break the layout.</h3> 
 
     <p>Some text here...</p> 
 
     </div> 
 
    </article> 
 
    </li> 
 
    <li> 
 
    <article> 
 
     <div class="thumb"> 
 
     <img class="img" alt="" src=""> 
 
     </div> 
 
     <div class="post-info"> 
 
     <h3>Hey there! You should make me bigger to break the layout.</h3> 
 
     <p>Some text here...</p> 
 
     </div> 
 
    </article> 
 
    </li> 
 
    <li> 
 
    <article> 
 
     <div class="thumb"> 
 
     <img class="img" alt="" src=""> 
 
     </div> 
 
     <div class="post-info"> 
 
     <h3>Hey there! You should make me bigger to break the layout.</h3> 
 
     <p>Some text here...</p> 
 
     </div> 
 
    </article> 
 
    </li> 
 
    <li> 
 
    <article> 
 
     <div class="thumb"> 
 
     <img class="img" alt="" src=""> 
 
     </div> 
 
     <div class="post-info"> 
 
     <h3>Hey there! You should make me bigger to break the layout.</h3> 
 
     <p>Some text here...</p> 
 
     </div> 
 
    </article> 
 
    </li>

來源

2017-09-14 16:57:06 Johannes