Div浮動小数点が左に行く

Question

私は3つの子divをラッパーに入れます。そのうち2つは右に浮動する必要があり、1つは常に左に浮動します（これは.mainクラスです）。本部は常に来る

#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 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：あなたはフィドル

My Fiddle Here

HTMLで私のHTML構造を見てすることができますダウン。この行動を理解するのに役立つ人もいます。

注：私は自分のHTML構造を変更したくありません。

Answer 1

あなたのCSSファイルでmainクラスに以下を追加します： `フロート：：ちょうど` NONE`へ* *さん.main `float`変更

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