css - 段落在 div 之外流动

Question

我正在尝试按此处所述制作页脚：http: //css-tricks.com/left-align-and-right-align-text-on-the-same-line/

问题是 2 段被放置在页脚下方，就好像它们没有在 div 中定义一样。这是我的代码：

<div id="footer" style="clear: both;">
  <p class="alignleft">left</p>
  <p class="alignright">right</p>
</div>

CSS：

div#footer{
    height: 20px;
    padding: 0px 10px;
    line-height: 20px;
    clear: both;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}

Answer 1

overflow: hidden;在容器上使用div以清除浮动，不要使用height

演示

CSS

div#footer {
   padding: 0px 10px;
   line-height: 20px;
   overflow: hidden;
}

Answer 2

高度值应该是自动的

CSS

#footer{
   height: auto;
   padding: 0px 10px;
   line-height: 20px;
   **word-wrap: break-word;**
}