如何清除浮动水平对齐的div

Question

我有三个div分别是div1, div2, div3。

所有的div都有float:left，所以它们是水平堆叠的:我怎么能通过只将样式应用到div2来分解第三个div呢?我尝试了clear:both和clear:right，但没有任何工作

注意:我想只对div2应用样式

<div style="float:left">
    <div style="float:left;width:100px;height:100px;border:1px solid red">div1</div>
    <div style="float:left;width:100px;height:100px;border:1px solid red">div2</div>
    <div style="float:left;width:100px;height:100px;border:1px solid red">div3</div>
</div>

https://i.stack.imgur.com/sGdBq.png

Answer 1

将此规则添加到第二个div:

margin-right: calc(100% - 204px)

Codepen: http://codepen.io/anon/pen/NqexXJ

---

这将应用等于100%的宽度减去204px的右距
(即(100px + 2px border) * 2)

这样做，第三个div将向下移动到一个新的行，无论你的视口有多宽

Answer 2

尝试将此代码添加到div2

float: none;
overflow: hidden;

小提琴

Answer 3

如果我的理解正确的话，您应该是这样划分第三个div。

div{
    border:1px solid red;
    width:50px;
    height:50px;
    float:left;
}
#quadrado{
    position:relative;
    width:150px;
    height:auto;
}

<div id="quadrado">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

原始jsfiddle

Answer 4

使用以下…:nth-of-type selector允许您根据一个公式根据它们的源顺序选择一个或多个元素。

链接

div:nth-of-type(2)
{
     margin-right:calc(100% - 204px)
}