浮动元素

我有一些浮动元素，比如除了内容区域之外还浮动的侧边栏。如果我没有在侧边栏末尾添加 ，则页脚和背景的某些部分变得很奇怪。浮动元素

我错过了想到的任何快速解决方案？

谢谢。

编辑：例如，我希望边框没有间隙，背景也不应有空格。如果只是看起来像两个部分：1）内容与侧边栏2）页脚

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>layout</title> 

    <style type="text/css"> 

    body { 
     margin:0; 
     padding:0; 
    } 

    #main { 
     background:#cfcfcf; 
    } 

    .inner { 
     margin: 0 auto; 
     padding: 96px 72px 0; 
     width: 1068px; 
     border-color: #000; 
     border-style: solid; 
     border-width: 0 1px; 
     color: #3C3C3C; 
    } 

    .post { 
     width: 705px; 
     background:#999; 
     float:left; 
    } 

    #comments, #respond { 
     background:#999; 
    } 

    #sidebar { 
     background:#777; 
    } 

    #footer { 
     clear:both; 
     background:gray; 
    } 

    </style> 
</head> 
<body> 

    <div id="main"> 

     <div class="inner"> 

      <div id="post" class="post"> 

       <h2>Lorem Ipsum Test Page</h2> 

       <div class="entry"> 

        <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

       </div> <!-- entry --> 

      </div> <!-- post --> 

      <div id="sidebar"> 

       <h2>Meta</h2> 
        <ul> 
         <li>Login</li> 
         <li>Anything</li> 
        </ul> 

       <h2>Subscribe</h2> 
        <ul> 
         <li>Entries (RSS)</li> 
         <li>Comments (RSS)</li> 
        </ul> 

      </div> <!-- sidebar --> 

     </div> <!-- inner --> 

    </div> <!-- main --> 

    <div id="footer"> 
     <div class="inner"> 

     Something 

     </div> <!-- inner --> 
    </div> <!-- footer --> 

</body> 
</html>

来源

2011-01-12 matt

什么是你的HTML和CSS代码的div？ – BoltClock 2011-01-12 20:28:48

好文章：http://css-tricks.com/all-about-floats/ – kapa 2011-01-12 20:34:23

您可以将包含元素overflow属性设置为visible以外的值。

来源

2011-01-12 20:32:24 Jim

你可以只让页脚所以它与clear: both风格。

来源

2011-01-12 20:29:20 Jacob

正确的方法是清除下一个元素的左侧和右侧。

所以在页脚您可以添加：

#footer { 
    clear: both; 
}

这会迫使页脚，深入到下一行，这是“正确”的方式。稍后更改设计也会更容易，因为您不必更改标记，只需要CSS。

来源

2011-01-12 20:32:01

我编辑了我的文章。请看一看。在这种情况下你将如何解决它。一个简单的明确：两个都没有做的工作...背景和边界是越野车 – matt 2011-01-12 20:37:59

display: inline-block;真的很不错。太糟糕的IE并不真的支持它。

来源

2011-01-12 20:34:57 tdammers

说实话，我不会试图绕过它。你可以像其他人所建议的那样把清楚的东西放在页脚中;但你不能保证你的html的其他部分不会被错误地浮动或阻止。如果您采用仅在清除元素时遇到由于HTML中随机部分浮动而导致元素混乱的策略;你可能会养成一直这样做的习惯。相反，下面是通常保证了其他元素将被不正确地浮动风格的例子：

<div> 
    <div style="float:right;"></div> 
    <div style="float:right;"></div> 
    <!--Add a clear div as last sibling of any floated elements--> 
    <div style="clear:both;"></div> 
</div>

而且，我会用一个空div代替BR的。那只是我而已。

所以从你的例子绘制：

 </div> <!-- post --> 

     <!-- insert empty clear div hear --> 
     <div style="clear:both;"></div> 

     <div id="sidebar">

来源

2011-01-12 20:40:55 Dave

浮动元素<br /><br /><br /><br /><br /\><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

回答

浮动元素<br /><br /><br /><br /><br /\><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

回答

相关问题