右浮動は動作しません

Question

こんにちは私はちょうど私のCSS float:right;がうまくいかなかった理由を知りたいですか？

私はあなたが一つの赤のdiv（.hm）がある見ることができます。このデモではcodepen.io

からこのDEMOを作成しました。この区画は右角でなければならないが、左に浮いている。この点で、誰の問題が私を助けてくれるでしょうか？

CSS

.header { 
    position:fixed; 
    width:100%; 
    padding:20px 0px; 
    box-sizing:border-box; 
    border-bottom: 1px solid #dbdbdb; 
    background-color:#ffffff; 
} 
.header_in { 
    position: relative; 
    width: 100%; 
    max-width: 1000px; 
    margin: 0px auto; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-box-align: stretch; 
    -webkit-align-items: stretch; 
    -ms-flex-align: stretch; 
    align-items: stretch; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 
.smatLogo { 
    position:relative; 
    float:left; 
    width:40px; 
    height:40px; 
    background-color:blue; 
} 
.smatLogo img { 
    width:100%; 
} 

.hm { 
    float:right; 
    position:relative; 
    height:40px; 
    width:100%; 
    max-width:200px; 
    background-color:red; 
} 

.mn { 
    float:left; 
    width:calc(100%/3 - 1px); 
    width: -webkit-calc(100%/3 - 1px); 
    width: -mox-calc(100%/3 - 1px); 
    height:40px; 
} 

.notif { 
    width:100%; 
    height:40px; 
} 

.exp{ 
    width:100%; 
    height:40px; 
} 

.user{ 
    width:100%; 
    height:40px; 
} 

Answer 1

そのクラス.header_inに設定されたためのdisplay:flex;プロパティ。 これはflexオブジェクトの正しい動作です。

これで、flexプロパティを使用しないか、flexboxのプロパティが必要な場合は、以下の解決方法を使用できます。

.hmクラスにはmargin-left: auto;を使用する必要があります。

DEMO

注：これはまたtablesを使用して行うことができるが、後ラインの下の同じtableはあなたを噛まないように戻ってくるでしょう：D