html - float 设置无效

Question

写一段代码，包括html和css，在css文件:common.css，我写

.r {
   float:right;  
}

在 html 文件中，写入:

<div class="menu r">

</div>

但是这个div还是在左边，代码如下:通用.css

/*header start*/
.headerbg {
    width:100%;
    height:100px;
    background-color: #fdfdfd;
}
.header {
    width:1200px;
}
.logo {
    display:block;
}
.f {
    float：left;
}
.menu {
    width:570px;
    height:50px;
    background-color: skyblue;
}
.r {
    float：right;
}
/*header end*/

在html文件中，代码:

<div class="headerbg">
    <div class="header">
        <a href="#" class="logo f">
            <img src="images/logo.gif" width="305" height="70" alt="...">
        </a>
        <div class="menu r">

        </div>
    </div>
</div>

但是div class = "menu r"还在左边，在chrome中，按F12，找到:

.r {
}

no content:float:right,你能告诉我为什么以及如何更正吗

Answer 1

console.log('float:right' === 'float:right')===>result : false
 your code--------^                 ^----------my code

console.log('float：right' === 'float:right');

console.log('float:right'.charCodeAt(5));-->//65306
console.log('float:right'.charCodeAt(5));--->//58

所以，问题出在 :(冒号)中。

你可以从其他代码复制 float:right 吗？要修复它，请将其删除并复制并粘贴此代码:

.r { float: right; }

.headerbg {
    width:100%;
    height:100px;
    background-color: #fdfdfd;
}
.header {
    width:1200px;
    background-color: red;
}
.logo {
    display:block;
}
.f {
    float：left;
}
.menu {
    width:870px;
    height:50px;
    background-color: skyblue;
    float：right;
}
.r {
    float: right;
}

<div class="headerbg">
  <div class="header">
    <a href="#" class="logo f">
	  <img src="images/logo.gif" width="305" height="70" alt="...">
	</a>
    <div class="menu r">ss</div>
  </div>
</div>