HTML元素的动态定位

我有一个网站，工作很好，看起来不错，等等。问题是我不是最好的定位，浮动等。而不是元素只是一个接一个地排列，我必须手动设置越来越大的空白，为每一个额外的段落我添加

我的导航条由一个固定分区内的ul组成。ul不是浮动的，但“li”是浮动的。我需要一种方法来定位这个和其他元素，这样所有的东西都在导航栏下面。我试过使用clear：两者都有；无济于事。我知道我的定位到处都是，我真的不明白定位和浮动是如何继承的

这里有一个链接到

HTML:

---

是的，与其为所有内容手动提供边距，为什么不为固定导航条后面的内容使用整个包装的边距呢

还有html

<div class="nav-bar">
    <h1>
        topbar
    </h1>
    <ul>
        <li>one</li>
        <li>tow</li>
        <li>three</li>
    </ul>
</div>
<div class="content">
    <h2>content</h2>
    <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
</div>

顶栏

一个
拖
三

内容
嗨你好ouyasd asdasda dasdasd

嗨你好ouyasd asdasda dasdasd

嗨你好ouyasd asdasda dasdasd

嗨你好ouyasd asdasda dasdasd

html{
    height: 100vh;
    width: 100vw;
    margin: 0px;
}

body{
    height: 100vh;
    width: 100vw;
    margin: 0px;
    background-color: #009900;
}

div.navbar{
    height: 50px;
    width: 100vw;
    position: fixed;
    background-image:url('images/navbar/navbar.png');
    background-repeat:repeat-x;
}

#header{
    position: relative;
    float: left;
    margin: 40px 0px 0px 5px;
    font-family: 'League Gothic', sans-serif;
}

p {
    position: absolute;
    margin: 100px 0px 0px 5px;
    font-family: 'Ubuntu', sans-serif;
}

img.navbar{
    float: left;
}

ul{
    list-style-type: none;
    margin: 4px 0px 0px 0px;
    padding: 0;
    overflow: hidden;
}

a:link,a:visited
{
display: block;
width: 120px;
font-weight:  500;
font-family: 'Ubuntu', sans-serif;
color:  #FFFFFF;
text-align: center;
padding: 4px;
margin: 0px;
text-decoration:  none;
}

li{
    float: left;
{

.nav-bar{
    height:50px;
    overflow:hidden;
     background-color:#000;
     width:100%;
     position:fixed;
     top:0px;
     left:0px;
 }

.content{
    margin-top:75px;
}

<div class="nav-bar">
    <h1>
        topbar
    </h1>
    <ul>
        <li>one</li>
        <li>tow</li>
        <li>three</li>
    </ul>
</div>
<div class="content">
    <h2>content</h2>
    <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
</div>