Html 右浮动不'；行不通

大家好，我只是想知道为什么我的css

float:right不起作用

我从codepen.io创建了这个

在这个演示中，您可以看到有一个红色div（
.hm
）。这个div应该在右上角，但它在左上角浮动。在这方面有什么问题可以帮助我吗

CSS

这是因为
显示：flex
中为类
.header\u设置的代码>属性。
这是flex对象的正确行为

因此，现在您可以选择不使用
flex
属性，或者如果需要
flexbox
的属性，则可以使用下面给出的解决方案

为了解决这个问题，您必须使用
marginleft:auto.hm
类的code>


注意：这也可以通过使用
表格来完成，但稍后，相同的
表格将回来咬你：D
删除显示：flex from.header\u in并检查
.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;
}