當我添加溢出-Y

Question

我與溢出瞎搞，我發現我的列表，當我創建了頂級的包裝我的代碼消失了我的無序列表中消失。

body { 
 
    font-size: 36px; 
 
    overflow: hidden; 
 
    font-family: "Arial"; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    transition: color 0.2s ease; 
 
} 
 
li:hover { 
 
    color: red; 
 
} 
 
h1,h2 { 
 
    color: lightcoral; 
 
} 
 
.left,.right { 
 
    position: relative; 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: 100vh; 
 
} 
 
.right { 
 
    float: right; 
 
    background-color: lightgreen; 
 
} 
 
.left { 
 
    float: left; 
 
    background-color: lightblue; 
 
} 
 
.top-wrapper { 
 
    width: 100%; 
 
} 
 
.top-menu { 
 
    background-color: darkgreen; 
 
    height: 30px; 
 
} 
 
.sub-top-l,.sub-top-r { 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: 20px; 
 
    font-size: 12px 
 
} 
 
.sub-top-l { 
 
    float: left; 
 
    background-color: darkblue; 
 
} 
 
.sub-top-r { 
 
    float: right; 
 
    background-color: darkred; 
 
} 
 
.list-wrap { 
 
    overflow-y: auto; 
 
    height: 100%; 
 
}

<div class="content-wrapper"> 
 
    <div class="left"> 
 
     <h1>Cowabunga</h1> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="top-wrapper"> 
 
      <div class="top-menu"> 
 

 
      </div> 
 
      <div class="sub-top-l"> 
 
       test 
 
      </div> 
 
      <div class="sub-top-r"> 
 
       test 
 
      </div> 
 
     </div> 
 
     <div class="list-wrap"> 
 
      <ul> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

以獲取列表顯示的唯一方法是添加顯示屬性絕對的CSS類.top-wrapper。

有誰知道這是爲什麼默認行爲？我正在尋找一個詳細的解釋。

JSFfiddle Demo

添加position: absolute到.top-wrapper讓它顯示出來。

Answer 1

我不能寫了，此刻一個偉大的/詳細的解釋，但長話短說，這是因爲如何彩車工作（它們定位在正常流動，然後以浮動反對搬出它在他們指定的方向最遠的邊緣），因爲你沒有清理是同級的浮動元素，在.list-wrap DIV元素。

清除的元素會告訴排隊的下一個元素（在這種情況下，.list-wrap移動到一個新的生產線，而不是試圖包住浮動元素周圍。

position: absolute;的作品，因爲它告訴的元素顯示，絕對的，只要你告訴它，相對於最近position: relative;祖先（如果有的話）

下面是與元素的最小演示清除：

.right { 
 
    width: 50%; 
 
    height: 100vh; 
 
    background-color: lightgreen; 
 
} 
 
.sub-top-l, .sub-top-r { 
 
    width: 50%; 
 
} 
 
.sub-top-l { 
 
    float: left; 
 
} 
 
.sub-top-r { 
 
    float: right; 
 
} 
 
.list-wrap { 
 
    overflow-y: auto; 
 
    clear: left; 
 
}

<div class="content-wrapper"> 
 
    <div class="right"> 
 
     <div class="top-wrapper"> 
 
      <div class="sub-top-l"> 
 
       test 
 
      </div> 
 
      <div class="sub-top-r"> 
 
       test 
 
      </div> 
 
     </div> 
 
     <div class="list-wrap"> 
 
      <ul> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

而且這裏是你的頁面與該元素演示清零：

body { 
 
    font-size: 36px; 
 
    overflow: hidden; 
 
    font-family: "Arial"; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    transition: color 0.2s ease; 
 
} 
 
li:hover { 
 
    color: red; 
 
} 
 
h1,h2 { 
 
    color: lightcoral; 
 
} 
 
.left,.right { 
 
    position: relative; 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: 100vh; 
 
} 
 
.right { 
 
    float: right; 
 
    background-color: lightgreen; 
 
} 
 
.left { 
 
    float: left; 
 
    background-color: lightblue; 
 
} 
 
.top-wrapper { 
 
    width: 100%; 
 
} 
 
.top-menu { 
 
    background-color: darkgreen; 
 
    height: 30px; 
 
} 
 
.sub-top-l,.sub-top-r { 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: 20px; 
 
    font-size: 12px 
 
} 
 
.sub-top-l { 
 
    float: left; 
 
    background-color: darkblue; 
 
} 
 
.sub-top-r { 
 
    float: right; 
 
    background-color: darkred; 
 
} 
 
.list-wrap { 
 
    overflow-y: auto; 
 
    clear: left; 
 
    height: 100%; 
 
}

<div class="content-wrapper"> 
 
    <div class="left"> 
 
     <h1>Cowabunga</h1> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="top-wrapper"> 
 
      <div class="top-menu"> 
 

 
      </div> 
 
      <div class="sub-top-l"> 
 
       test 
 
      </div> 
 
      <div class="sub-top-r"> 
 
       test 
 
      </div> 
 
     </div> 
 
     <div class="list-wrap"> 
 
      <ul> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
       <li>test</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>