html - 右浮动不起作用

Question

您好，我只是想知道为什么我的 css float:right; 不起作用？

我创建了这个 DEMO 来自 codepen.io

在此演示中，您可以看到有一个红色的 div (.hm)。这个 div 应该在右 Angular ，但它向左浮动。有什么问题有人可以在这方面帮助我吗？

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