为什么我的红色边框没有环绕我的文本div和我的侧栏div

Question

为什么我的红色边框没有环绕我的文本div和我的侧栏div。这是我的代码：

CSS：

body{

background-color: #d7d7d7;
color: #666666;
font-family: arial, sans-serif;
font-size: x-small;
}

div#header {
background-color: #323232;
height: 140px;
width: 950px;
}

div#maincontainer {
background-color: #d7d7d7;
width: 950px;
height: auto;
margin-top: 5px;
border: 1px solid red;

}

div#maintextcontainer{
//background-color: #333333;
width: 640px;
//margin-right: 10px;
margin: 1px;
float: left;
color: black;
}

div#maintextcontainer h2{
color: #4f4f4f;
}

div#sidebarcontainer {
//background-color: #333333;
width: 300px;
float: left;
color: black;
margin: 1px;

}

div#footer{
background-color: #323232;
width: 950px;
margin-top: 5px;
clear: left;
}
div#global{
width: 950px;
margin: auto;
}

HTML：

<div id="global">
<div id="header"> This is the header div</div>
<div id="maincontainer">
<div id="maintextcontainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam neque eu turpis euismod eget suscipit nulla ultrices. Donec sagittis mi non sem vestibulum elementum dapibus risus auctor. Praesent tristique laoreet dapibus. Integer vel ligula lorem, et pharetra lorem. 
</div>
<div id="sidebarcontainer">Nam at lectus vitae est tempor lacinia sed et ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent interdum mi id nisi aliquet pulvinar. 
</div>
</div>
<div id="footer">This is Footer Text</div>
</div>

Answer 1

您需要将overflow:auto;添加到div#maincontainer。除非设置了此属性，否则Floated元素将在其包含元素之外流动。

此外，双斜杠（//）不是CSS中的有效注释符号。