Css 部门及<；H3>；标记问题样式问题

我正在努力解决一个问题，我觉得这可能是一个非常简单的问题，我只是错过了，因为我已经看了这么久。但这里是这样的：

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

我有多个div包含wijmohtml5小部件。我基本上是在创建一个仪表板，到目前为止，一切都进行得非常顺利。我有一个顶部分区，其中包含一个完整的小部件，下面两个分区将页面一分为二，其中包含多个小部件。现在我尝试在底部添加最后一个div，它将像顶部div一样运行整个页面，但是每次我添加一个标签设计，使其看起来像一个标题栏，该标签的样式将从分隔页面的两个div的顶部运行到最底部。我似乎不知道我需要改变什么才能避免这种情况发生

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

这里有两个图像，显示添加标记之前和之后

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

之前：

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

之后：

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

下面是一些css代码

.header-bar
{
background: #494949; /* Old browsers */
background: -moz-linear-gradient(top, #787878 0%, #6d6d6d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #787878), color-stop(100%, #6d6d6d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #787878 0%, #6d6d6d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #787878 0%, #6d6d6d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #787878 0%, #6d6d6d 100%); /* IE10+ */
background: linear-gradient(top, #787878 0%, #6d6d6d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#787878', endColorstr='#6d6d6d', GradientType=0 ); /* IE6-9 */
box-shadow: 0 3px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.10);
padding: 0.4em 0.4em;
text-shadow: 1px 1px 2px rgba(0,0,0,0.50);
margin-right: 0.4em;
font-family: "Segoe UI" , Segoe, Tahoma, Geneva, sans-serif;
}

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

HTML格式：

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

---

编辑：添加HTML代码以显示结构

尝试在主体div之后添加一个div以清除。类似于

    <section>
        <div id="top-fullspan">
            <!--Removed to shorten code-->
        </div>

        <div id="mainbody">
            <div id="body-left">
                <div id="body-left-top"></div>
                <div id="body-left-bottom"></div>
            </div>
            <div id="body-right">
                <div id="body-right-top"></div>
                <div id="body-right-bottom">
                    <div id="body-right-bottom-lefthalf"></div>
                    <div id="body-right-bottom-righthalf"></div>
                </div>
            </div>
        </div>
        <div id="bottom-fullspan">
            <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
        </div>
    </section>

    <footer>
        <div></div>
    </footer>

</div>
</body>

<div id="mainbody">
        {...}
    </div>

<!-- Try adding this -->
<div style="clear: both;"></div>
<!-- End -->
    <div id="bottom-fullspan">
        <!--<h3 class="header-bar">Sentiment</h3>--> <!--Where issue is occuring-->
    </div>

---

我们需要查看CSS和HTML结构。但不是全部。请将此简化为一个简单的测试用例。小部件是如何设置的？它们是浮动的吗？你可能忘记清除浮点数了？我有浮点数设置。我只是有点困惑，到底是什么导致了这个问题？你能解释一下你认为这个问题是什么吗？我只想知道，以备将来参考：）当使用浮动的

或（任何元素）时，浏览器可能会混淆元素高度的结束位置，而没有后续的清除元素。在添加浮动后添加清除样式是一种很好的做法。希望这是有道理的。