!important；指的就是这个元素会右浮动，margin-right:0%
!important；指的是这个元素的右外边距为0，就算有其他同属性的样式，也会被带有!important的属性覆盖。
你的需求是这样么？你只要控制一下父级和子级的包含关系就可以实现了：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
margin: 0
padding: 0
}
hr{margin: 10px 0 10px 0 }
li {
list-style: none
}
.nav {
height: 35px
position: relative
}
.bar{
position: absolute
right: 0
}
.bar ul li {
float: left
background: #3695D5
width: 50px
height: 35px
line-height: 35px
text-align: center
}
.box{border: 1px solid #000000}
</style>
<body>
<div class="nav">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div class="box">
<ul>
<li>1212</li>
<li>2323</li>
<li>3434</li>
<li>4545</li>
</ul>
</div>
<hr>
<div class="box">
<div class="nav">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<ul>
<li>1212</li>
<li>2323</li>
<li>3434</li>
<li>4545</li>
</ul>
</div>
</body>
</html>
