правый плавающий не работает

Question

Привет, я просто хочу знать, почему мой css float:right; не работал?

Я создал этот DEMO от codepen.io

В этой демонстрации вы можете увидеть, есть один красный ДИВ (.hm). Этот div должен быть в правом углу, но он плавает влево. Какая проблема там, кто-нибудь может мне помочь в этом отношении?

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

Его из-за display:flex; набор свойств для класса .header_in. И это правильное поведение гибкого объекта.

Итак, теперь ваши варианты остаются либо не использовать свойство flex, либо если вам нужны свойства flexbox, тогда вы можете использовать решение, приведенное ниже.

Для устранения обходного пути вам необходимо использовать margin-left: auto; для класса .hm.

DEMO

Примечание: Это также может быть сделано с помощью tables, но позже вниз по линии, что же table вернется, чтобы укусить вас: D