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。

当你浮动元素时，你将它们从正常的文档流中取出。它们所在的父元素将它们视为不占用空间。如果另一个元素中的所有元素都浮动，它将会崩溃，并且在视觉上表现得像一个空元素。

使用clearfix允许那些浮动元素占用父级内的空间。如果您在浮动元素的父元素上应用边框或背景颜色，这将非常有用。

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

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

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>

Answer 2

问题是代码中没有任何浮点数被清除，因此外部div实际上没有任何有形内容。

解决方案是在它们出现的div结束后清除浮动。

.simple-score-bar::after, .score-wrapper::after {
   clear:both; content:''; display:block; height:0;
}

请参阅JSFiddle，其中包含一些Javascript以报告分数包装器的高度。

包装div元素大小为零

2 个答案: