HTML–；div的CSS问题_Html_Css - Fatal编程技术网

HTML–；div的CSS问题

html css

HTML–；div的CSS问题,html,css,Html,Css,我有以下HTML布局 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body { margin:10px 0px 0p

我有以下HTML布局

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                margin:10px 0px 0px 0px;
                font-size: 11px;
                font-family: Arial,Tahoma, sans-serif;
                background: #fff;
                color: #444;
            }

            h1 {
                font-size:1.5em;
                font-weight: bold;
            }


            #container { 
                width: 920px;
                margin: 0 auto;
                background-color: red
            }

            #header {
                border: 2px solid #ccc;
                height: 80px;
            }

            #content{
                display: block;
                width: 100%
            }

            #left {
                clear: left;
                float: left;
                width: 660px;
                border: 2px solid #ccc;
                margin:0 0 10px 0;
                padding:20px;
            }

            #right {
                position: relative;
                margin: 0 5px 0 5px;
                padding: 5px 0px 0px 0px;
                float: right;
                width: 200px;
                border: 2px solid #ccc;
            }

            #footer {
                clear: both;
                border: 2px solid #ccc;
                padding: 10px 0 20px 0;
                margin: 20px 0 0 0;
                font-size: .9em;
                color: #9b9b9b;
                width: 100%;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header" >
                <h1>Header</h1>
            </div>
            <div id="content">
                <div id="left">
                    <h1>Left</h1>
                </div>

                <div id="right">
                    <h1>Right</h1>
                </div>
            </div>
        </div>
        <div id="footer">
            <h1>Footer</h1>
        </div>
    </body>
</html>


身体{
保证金：10px 0px 0px 0px；
字体大小：11px；
字体系列：Arial、Tahoma、无衬线字体；
背景：#fff；
颜色：#444；
}
h1{
字号：1.5em；
字体大小：粗体；
}
#容器{
宽度：920px；
保证金：0自动；
背景颜色：红色
}
#标题{
边框：2个实心#ccc；
高度：80px；
}
#内容{
显示：块；
宽度：100%
}
#左{
清除：左；
浮动：左；
宽度：660px；
边框：2个实心#ccc；
裕度：0 10px 0；
填充：20px；
}
#对{
位置：相对位置；
保证金：0 5px 0 5px；
填充：5px 0px 0px 0px；
浮动：对；
宽度：200px；
边框：2个实心#ccc；
}
#页脚{
明确：两者皆有；
边框：2个实心#ccc；
填充：10px 0 20px 0；
利润率：20px0；
字体大小：.9em；
颜色：#9b9b9b；
宽度：100%；
背景色：天蓝色；
}
标题
左边
赖特
页脚

我的问题是#容器不包含#左和#右内容，它只包含#标题

请参考附件中的图片，了解我的预期布局

您可以在容器的末尾添加一个空元素，该元素具有“clear:both”：

<div id="container">
  <div id="header" >
    <h1>Header</h1>
  </div>
  <div id="content">
    <div id="left">
      <h1>Left</h1>
    </div>
    <div id="right">
      <h1>Right</h1>
    </div>
    <div style="clear:both">&nbsp;</div>
  </div>
</div>


标题
左边
赖特

我能够通过使用

溢出：隐藏来实现预期的结果属性
#container { 
      width: 920px;
      margin: 0 auto;
      background-color: red;
      overflow: hidden;
}

使用clearfix解决方案，即