div 不为元素扩展答案

【问题标题】：Div Not Expanding for Elementsdiv 不为元素扩展
【发布时间】：2013-11-19 00:01:59
【问题描述】：

我正在为我的制作公司准备一个新网站，现在它相当繁琐。

我有一个包含视频和侧边栏 div 的主体元素。这些设置为向左和向右浮动，并且它们与标题 div 都包含在页面中心的一个大“框架”div 中。大纲是这样的：

<frame>
    <header>
    </header>
    <main>
        <video>
            <vidframe> <- This is for keeping the iframe's aspect ratio (read it in some online tutorial)
                <iframe>
                </iframe>
            </vidframe>
        </video>
        <sidebar>
        </sidebar>
    </main>
</frame>

现在，框架 div 有一个白色背景，这将内容与我的背景图像分开。但是，问题在于主 div 和扩展的框架 div 没有向下延伸超过标题以包含视频和侧边栏 div。可以查看问题here on my website。

我假设它与浮动属性或位置属性有关，但我不知道出了什么问题。这是我的 CSS 的样子：

div.frame {
    width:70%;
    height:auto;
    background-color:#FFF;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    box-shadow:0 0 20px 0 #000;
}
div.main {
}
div.video {
    margin-left:3.57%;
    margin-top:3.57%;
    width:57.14%;
    float:left;
}
div.vidframe {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
div.vidframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
div.sidebar {
    margin-right:3.57%;
    margin-top:3.57%;
    width:32.14%;
    float:right;
}

再一次，这一切都在直播at my website.

感谢您的帮助！

【问题讨论】：

标签： css html background

【解决方案1】：

您需要清除浮动。在带有主类的 div 的结束标记之前添加<div style="clear:both"></div>。在您的 html 中的第 34 行之后

【讨论】：

谢谢。为什么这能解决问题？浮动 div 不算作 div 内容的一部分吗？
@Patrick 这正是浮动的意思——它将元素从布局和行计算中取出。清除浮动有点将清除之前的所有浮动内容封装在布局模型中的假想框中。