【发布时间】：2013-03-20 03:37:06
【问题描述】：
我有三个主要的 div，它们是 header,main-container 和 footer。 div 的 CSS 是
#main_container
{
width:950px;
margin:0 auto;
}
#header
{
background:#f4f8f9;
}
#footer
{
clear:both;
background:#355e95;
height:40px;
color:#fff;
font-size:13px;
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
现在，在索引页面中，没有左右浮动，因此页脚位于底部。但是在随后的页面中，有很多浮动，现在页脚在main-container上方！为什么会发生这种情况？我在footer div 之前清除了floating
<div class="clr"></div>
<div id="footer">
©2010 Sri Sai Group
<div class="fbtm">
Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
</div>
</div>
注意，当我添加overflow:auto; 页面时会这样！
我的一个页面的完整 HTML：
<body>
<div id="header">
<div class="htop">
<div class="phn">Ph +0361-26699811</div>
<div class="email">Email support@7sisters.in</div>
</div>
</div>
<div id="main_container">
<div id="menu_wrapper">
<div class="menu_outer">
<div class="logo">
<img src="css/images/logo.png" alt="Sri sai" />
</div>
<div class="menu">
<div id="site_title">
<h1>SRI SAI GROUP</h1>
</div>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>About</span></a>
<ul>
<li class='has-sub '><a href='#'><span>Overview</span></a>
</li>
<li class='has-sub '><a href='#'><span>Board Members</span></a>
</li>
<li class='has-sub '><a href='#'><span>Our Family</span></a>
</li>
<li class='has-sub '><a href='#'><span>Gratitude</span></a>
</li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Business</span></a>
<ul>
<li class='has-sub '><a href='#'><span>Food and Beverages</span></a>
</li>
<li class='has-sub '><a href='#'><span>Media and Entertaintment</span></a>
</li>
<li class='has-sub '><a href='#'><span>Information Technology</span></a>
</li>
<li class='has-sub '><a href='#'><span>Consumer Servies</span></a>
</li>
</ul>
</li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
<div id="web-design">
<img src="css/images/banner_ssg.png" />
Our Website Development team builds websites using latest technologies; the sites we build are robust, secure and reliable. Our process guarantees fast capturing of your idea and quick Website Development at minimum possible cost.
During the Website Development process we keep provisions for future growth of your business. The sites we build are SEO compatible. You will get professional developers that are personally dedicated to you and ready to meet your business objectives.
All our projects come with the needed documentation and support.
</div>
<div id="contact_form">
<form method="post" id="customForm" action="">
<div>
<label for="name">Name </label>
<input id="name" name="name" type="text" />
<span id="nameInfo"></span>
</div>
<div>
<label for="email">Phone </label>
<input id="phone" name="phone" type="text" />
<span id="phoneInfo"></span>
</div>
<div>
<label for="message">Address </label>
<textarea id="message" name="message" cols="" rows=""></textarea>
</div>
<div>
<label for="email">Email </label>
<input id="email" name="email" type="text" />
<span id="emailInfo"></span>
</div>
<div>
<label for="pass2">Website </label>
<select>
<option>Static</option>
<option>Dynamic</option>
</select>
<span id="pass2Info"></span>
</div>
<div>
<input id="send" name="send" type="submit" value="Send" />
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
</div>
<div class="clr"></div>
<div id="footer">
©2010 Sri Sai Group
<div class="fbtm">
Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
</div>
</div>
</body>
【问题讨论】：
-
请发布导致问题的其中一个页面的完整 html。它是 #main_container 中的浮动元素吗？如果是这样，您可能希望尝试将“溢出：隐藏”添加到#main_container，看看是否可以为您解决问题。
-
如果我添加溢出：隐藏；
main-container中的内容消失了！ -
看起来不是#main_container 女巫出了问题，而是它里面的东西。
标签： css css-float overflow footer