[分享]css做的网页老是蹦

最近我在学习使用 CSS 来设计网页，但是我发现我的网页老是蹦来蹦去的。我几乎快要抓狂了！

  <style>
            body{
                margin: 0;
                padding: 0;
            }
            header{
                background-color: #333;
                height: 100px;
                color: white;
                text-align: center;
                padding: 20px;
                margin-bottom: 10px;
            }
            nav {
                float: left;
                width: 20%;
                background: #ccc;
                height: 500px;
            }
            article {
                float: left;
                padding: 20px;
                width: 80%;
                background-color: white;
                height: 500px;
            }
            footer {
                background-color: #333;
                height: 100px;
                color: white;
                text-align: center;
                padding: 20px;
                clear: both;
            }
        </style> 

通过我的代码，你可能发现了我的问题所在，但我一直没有察觉。在 CSS 样式表中，我使用了 float 属性来让导航栏和内容区域均分一个容器的宽度。然而，我忘记为父元素添加清除属性。

具体而言，由于我没有清除父元素，浮动的子元素会造成父元素的高度计算混乱，从而使网页看起来蹦来蹦去的。

我解决这个问题的方法是加入一个空元素，利用 clear 属性来清除之前的浮动效果，代码如下：

  <div style="clear:both"></div> 

这个简单的 div 元素可以让浮动的导航栏和内容区域的最后一个元素之后紧跟着它，从而避免了高度的计算错误。像我这样犯同样错误的人，请不要直接放弃，清除浮动的方法一定要简单明了，否则可能导致你的网页变得异常混乱。