Html 我必须设置容器的高度吗？_Html_Css

Html 我必须设置容器的高度吗？

html css

Html 我必须设置容器的高度吗？,html,css,Html,Css,我有以下代码： #container { position:relative; width:760px; margin-left: auto; margin-right: auto; margin-top: 10px; border: 1px solid #cdcdcd; } #sidebar { float:left; width: 200px; background:red; } #wrapper {

我有以下代码：

#container {
    position:relative;
    width:760px;    

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

    border: 1px solid #cdcdcd;  
}

#sidebar {
    float:left;
    width: 200px;
    background:red;
}

#wrapper {
    float:left;
    width:460px;
background:blue;

}

这个HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>          
        </div>  
    </body>
</html>

我看到这个容器没有高度。。。。我必须设置它吗？我想解释一下高度取决于内部div的高度，我该怎么做？

您不必设置高度，只需添加：

<div style="clear: both;"></div>

并更新您的HTML文件以匹配

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>    
            <div class="clear"></div>      
        </div>  
    </body>
</html>

您不必设置高度，只需添加：

<div style="clear: both;"></div>

并更新您的HTML文件以匹配

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>    
            <div class="clear"></div>      
        </div>  
    </body>
</html>

这是因为您使用了float:left。一种解决方案是添加一个clear:tware div，如下所示：

CSS:

HTML:

这是因为您使用了float:left。一种解决方案是添加一个clear:tware div，如下所示：

CSS:

HTML:

为容器提供额外的CSS

overflow: hidden;

这将在没有额外标记的情况下打破浮动

无法使用内部的框阴影

为容器提供额外的CSS

overflow: hidden;

这将在没有额外标记的情况下打破浮动

无法使用框内阴影

谢谢！如果我不使用它，它不会跟随内部div的高度，因为它无法理解末尾是否有其他元素？@Dail浮动元素将从文档流中删除，因此不会影响其父元素的“高度”。清除：两者都告诉div恢复正常的文档流，并允许它识别高度谢谢！如果我不使用它，它不会跟随内部div的高度，因为它无法理解末尾是否有其他元素？@Dail浮动元素将从文档流中删除，因此不会影响其父元素的“高度”。清除：两者都告诉div在此处恢复正常的文档流，并允许它识别高度