html - div 外的段落改变了 div 内段落的位置

Question

我得到了以下 html:

<div id="noiseCanvasDiv">
            <p>Noise</p>
            <canvas id="noiseCanvas" ></canvas>
        </div>
        <div id="noiseLegend">
            <p class="legendOne">Blue Sensor</p><p class="legendTwo">Grey Sensor</p>
        </div>
        <div id="lightCanvasDiv">
            <p>Light</p>
            <canvas id="lightCanvas"></canvas>
        </div>
...
</div>

对应的css:

baseCanvas,
#noiseCanvas,
#lightCanvas,
#activityCanvas {
    position: relative;
    height: 150px;
    width: 310px;
    padding-left: 5px;
}

#noiseCanvas {
    padding-top: 5px;
}

#activityCanvas {
    float: left;
}

#noiseLegend {
    position: relative;
    float: right;
    margin-top: -10px;
}

legendBaseclass,
.legendOne,
.legendTwo {
    display: inline;
    font-size: 10pt;
    font-weight: normal;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

段落 Light 应该像 Noise 一样显示在页面中间。但是只要我添加 noiseLegend 它就会被推到左边。这怎么可能，因为它被 lightCanvasDiv 包围了？

Answer 1

来自评论:

I'm guessing "Blue SensorGrey Sensor" does float: right;. Include a clearfix or make it a non floating block element with text-algin: right; or wrap it.