为什么div在div中

Question

我正在努力学习HTML/CSS通过尝试在HTML/CSS中制作简单的网站。到目前为止，我已经建立了一些基本的框架，但是有一些我不能解决的问题。

我有一个问题，div的文章列表，sidebar1，sidebar2被放在一个div页脚内，但我想把div的文章列表，sidebar1，sidebar2放在页脚之外。

相关代码如下: HTML：

        <!-- article listing -->
        <div class="articlelisting">
            articlelisting
        </div>

        <!-- sidebar 1 -->
        <div class="sidebar1">
            sidebar1
        </div>

        <!-- sidebar 2 -->
        <div class="sidebar2">
            sidebar2
        </div>

        <!-- footer -->
        <div class="footer">
            footer
        </div>  

CSS：

.articlelisting {
display: inline;
width: 48%;
float: left;
}

.sidebar1 {
display: inline;
width: 24%;
float: right;
}

.sidebar2 {
display: inline;
margin-right: 15px;
width: 24%;
float: right;
}

 .footer {
width: 100%;
border: solid 1px red;
}

编辑:我已经放置了文章列表div。很抱歉我错过了。

我的问题是为什么div文章列表，sidebar1，sidebar2，内部div页脚，以及如何将它们放置在div页脚之外？

谢谢

Answer 1

嘿，现在你的页脚是这样清楚的

    .footer{
    clear:both;
    overflow:hidden;
       /// and write some properties as required to
    }

实时演示http://tinkerbin.com/9vrEFCqo

Answer 2

将clear: both;添加到页脚样式。这确保页脚不会出现在前面的-ing中，这些div是floatdiv。

.footer {
  clear: both; <-- Add this
  width: 100%;
  border: solid 1px red;
}​

我在jsfiddle上发布了一个工作示例

Answer 3

然后把你的文章列表，sidebar1，sidebar2放在外面的页脚。

并给予

.footer {
width: 100%;
border: solid 1px red;
clear:both;
}