CSS：爲什麼使用float：left break div的高度？

我有兩個div應該有相同的高度。所以我在容器上使用display: table，並在子div中使用display: table-cell。但是，這些孩子正在使用一個通用的.css文件，其中包含float:left。在螢火蟲上，當我移除這個float:left時，一切似乎都按照預期工作。我花了幾個小時，但我無法自己找到答案。CSS：爲什麼使用float：left break div的高度？

真實的例子比較複雜，但這裏是一個例子。

.container { 
 
    float: left; 
 
    min-width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 75%; 
 
} 
 

 
.panels { 
 
    width: 100%; 
 
    height: 90px; 
 
    display: table; 
 
} 
 

 
.panel-left { 
 
    width: 75%; 
 
    padding-right: 0.5%; 
 
    padding-bottom: 10px; 
 
    height: 100%; 
 
    display: table-cell; 
 
    background-color: #124458 
 
} 
 

 
.panel-right { 
 
    width: 25%; 
 
    padding-bottom: 10px; 
 
    height: 100%; 
 
    display: table-cell; 
 
    background-color: #456845 
 
} 
 

 
.height { 
 
    height: 100%; 
 
} 
 

 
.box { 
 
    height: calc(100% - 10px); 
 
    box-sizing: border-box; 
 
    margin-bottom: 10px; 
 
    min-width: 100%; 
 
    float: left; 
 
} 
 

 
.box-title { 
 
    border-radius: 10px 10px 0 0; 
 
    background-color: white; 
 
    font-weight: bold; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    padding: 5px 15px; 
 
    color: #003278; 
 
} 
 

 
.box-inside { 
 
    height: calc(100% - 20px); 
 
    box-sizing: border-box; 
 
    background: #f3f6f9; 
 
    border-radius: 0 0 10px 10px; 
 
    padding: 10px 15px; 
 
    float: left; 
 
    min-width: 100%; 
 
    color: black; 
 
} 
 

 
form { 
 
    margin-top: 8px; 
 
    background: #f3f789; 
 
    height: 20px; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    border-spacing: 0 0; 
 
    white-space: nowrap; 
 
    border-collapse: collapse; 
 
    color: black; 
 
}

<div class="container"> 
 
    <div class="panels"> 
 
    <div class="panel-left"> 
 
     <div class="height-100"> 
 
     <div class="box"> 
 
      <div class="box-title"> 
 
      LEFT PANEL 
 
      </div> 
 
      <div class="box-inside"> 
 
      <form> 
 
       <table> 
 
       <button> 
 
        </button> 
 
       </table> 
 
      </form> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-right"> 
 
     <div class="height-100"> 
 
     <div class="box"> 
 
      <div class="box-title"> 
 
      RIGHT PANEL 
 
      </div> 
 
      <div class="box-inside"> 
 
      <span>STATUS</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

這是一個有點不同，但很接近我的情況。

在我的屏幕我看到這一點：

而且，當我檢查的例子有display:table和display:table-cell，我看沒有其他人使用float left or right。不過，我必須擁有它，因爲它來自通用的CSS並且其他組件正在使用它。

來源

2017-08-17 Erdi İzgi

使用clearfix或Flexbox的，如果你想要一個像現在工作;） – Kiwad

浮動元素所出來的DOM的背景下，爲此你的元素沒有父母給誰高度與...相關。 – coderodour

@coderodour所以，當應用於此框的浮動比父母結束。但是，左框和右框仍然具有相同的CSS屬性。爲什麼左邊的人有不同的身高？ –

由於您使用float，因此您的框最終會超出DOM的上下文範圍，因此不再有父母與其高度相關，因爲您已將其設置爲百分比。

因爲在你的左側面板中的表單元素有margin-top和height CSS屬性和包裝盒是DOM這樣的高度是不相關的父的背景之外，每箱生長在高度環繞其自己的內容。從窗體中移除margin-top和height css屬性將使您的方框等高。

.container { 
 
    float: left; 
 
    min-width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 75%; 
 
} 
 

 
.panels { 
 
    width: 100%; 
 
    height: 90px; 
 
    display: table; 
 
} 
 

 
.panel-left { 
 
    width: 75%; 
 
    padding-right: 0.5%; 
 
    padding-bottom: 10px; 
 
    height: 100%; 
 
    display: table-cell; 
 
    background-color: #124458 
 
} 
 

 
.panel-right { 
 
    width: 25%; 
 
    padding-bottom: 10px; 
 
    height: 100%; 
 
    display: table-cell; 
 
    background-color: #456845 
 
} 
 

 
.height { 
 
    height: 100%; 
 
} 
 

 
.box { 
 
    height: calc(100% - 10px); 
 
    box-sizing: border-box; 
 
    margin-bottom: 10px; 
 
    min-width: 100%; 
 
    float: left; 
 
} 
 

 
.box-title { 
 
    border-radius: 10px 10px 0 0; 
 
    background-color: white; 
 
    font-weight: bold; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    padding: 5px 15px; 
 
    color: #003278; 
 
} 
 

 
.box-inside { 
 
    height: calc(100% - 20px); 
 
    box-sizing: border-box; 
 
    background: #f3f6f9; 
 
    border-radius: 0 0 10px 10px; 
 
    padding: 10px 15px; 
 
    float: left; 
 
    min-width: 100%; 
 
    color: black; 
 
} 
 

 
form { 
 
    background: #f3f789; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    border-spacing: 0 0; 
 
    white-space: nowrap; 
 
    border-collapse: collapse; 
 
    color: black; 
 
}

<div class="container"> 
 
    <div class="panels"> 
 
    <div class="panel-left"> 
 
     <div class="height-100"> 
 
     <div class="box"> 
 
      <div class="box-title"> 
 
      LEFT PANEL 
 
      </div> 
 
      <div class="box-inside"> 
 
      <form> 
 
       <table> 
 
       <button> 
 
        </button> 
 
       </table> 
 
      </form> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-right"> 
 
     <div class="height-100"> 
 
     <div class="box"> 
 
      <div class="box-title"> 
 
      RIGHT PANEL 
 
      </div> 
 
      <div class="box-inside"> 
 
      <span>STATUS</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-17 15:55:36 coderodour

CSS：爲什麼使用float：left break div的高度？

回答

相關問題