Div 向左浮动下降

Question

我将在包装器中包含三个 child div，其中两个需要向右浮动，一个始终向左浮动（其中一个具有 .main class).您可以在 fiddle

中查看我的 HTML 结构

HTML:

<div id="wrap">
    <div class="child"> 
        This is initiator
    </div>
    <div class="child">
        This is second joinee
    </div>
    <div class="main child">
        This is third joinee
    </div>
</div>

CSS:

#wrap{
  width:600px;
  height:400px;
}
.child:nth-child(even){
  background:red;
}
.child:nth-child(odd){
  background:green;
}
.child{
  height: 200px;
  width: 200px;
  display: block;
  float: right;
  clear:right;
  text-align: center;
  vertical-align: middle;
}
.main{
  height: 400px!important;
  width: 400px!important;
  float:left!important;
  clear:none!important;
  background:yellow !important;
}

但左浮动 Div 总是下降。有人可以帮助我理解这种行为吗？

注意：我不想改变我的HTML结构。

Answer 1

将以下内容添加到 css 文件中的 main class：

.main{
    position:absolute;
    left:0;
}

Div 向左浮动下降

Div Floating left goes down

html

css

css-float