css - CSS 3 Div浮点数与Liquid中心div

这是一个非常简单的问题，但我不知道出了什么问题。

我有三个div，其中两个设置了像素大小，另一个（中间）填充了两个之间的剩余空间。

|------|--------------------------|------|
|      |                          |      |
|      |                          |      |
|      |                          |      |
|------|--------------------------|------|
       <-------------------------->
                 Width Fill

我有以下CSS：

左股

#leftdiv {
    height: 50px
    width: 50px;
    float: left;
    }

中分部

#middlediv {
    min-width: 270px;
    width: calc(100% - 100px);
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: -o-calc(100% - 100px);
    float: left;
}

右分区

#rightdiv {
    width: 100px;
    height: 50px;
    float: right;
}

我在这里对其进行了简化，但是基本上正确的div实际上并不浮动，它像下面这样：

|------|--------------------------|
|      |                          |
|      |                          |
|      |                          |
|------|--------------------------|
                                |------|
                                |      |
                                |      |
                                |      |
                                |------|

最佳答案

clear:both使元素下降到文档中位于其之前的所有浮动元素之下。

因此请尝试在clear: both中使用#rightdiv。

有关更多信息，请检查此SO Answer。