css - 包装 div 元素大小为零

Question

I have the following nested elements : 

<div class="simple-score-bar">
<span class="score-heading">heading</span>
<div class="score-wrapper">
    <div class="score-label">
        <span>76</span>
    </div>
    <div class="score-chart">
        <div>
            <svg>
                <g>
                    <rect width="400px" height="30px"></rect>
                    <g>
                        <rect width="100px" height="30px"></rect>
                    </g>
                </g>
            </svg>
        </div>
    </div>
</div>

问题是 score-bar 和 score-wrapper div 高度是 0 ，当我检查它们时。我想知道为什么会这样。

CSS:

.simple-score-bar {
  font-family :'Open Sans Bold', 'Open Sans';
  .score-heading {
    fill: #3D7CD1;
    font-style: normal;
    word-wrap: break-word;
    font-size: 15px;
  }
  .score-wrapper {
    .score-chart {
      float: left;
      width: 80%;
      .score-legend {
        font-size: 10px;
        font-style: normal;
        color: #778599;
        line-height: normal;
        font-family: 'Open Sans';
        .score-left {
          float: left;
        }
        .score-right {
          float: right;
        }
        .score-text {
          font-weight: 700;
        }
        .score-value {
          font-weight: 400;
        }
      }
    }
    .score-label {
      float:left;
      word-wrap: break-word;
      font-size: 16px;
      font-style: normal;
      margin-right: 3%;
    }
  }

}

Answer 1

您可以使用 clearfix在这些元素上。

当您 float 元素时，您将它们从正常的文档流中移除。它们所在的父元素会将它们视为不占用空间。如果另一个元素中的所有元素都是 float 的，它将折叠起来，并且在视觉上表现得像一个空元素。

使用 clearfix 允许那些 float 元素占用父元素中的空间。如果您在 float 元素的父元素上应用边框或背景颜色，这将很有用。

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}    
.cf:after {
    clear: both;
}

float block 级元素将折叠到其内容的大小。因此，如果您希望某些 float 元素出现在先前 float 元素的下方，您可能需要清除它们。

div {
  float: left;
  width: 50px;
  height: 15px;
  border: 1px solid gray;
  margin: 3px;
  }
div:nth-of-type(3) {
  clear: left; /* move third div to the next line */
  }

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>