div之外的pragraph改变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

来自评论：

  

我在猜测＆＃34; Blue SensorGrey传感器＆＃34; float: right;。包含clearfix或使其成为带有text-algin: right;的非浮动块元素或将其包装。