Html 向右浮动，不清除以前的浮动_Html_Css_Css Float

Html 向右浮动，不清除以前的浮动

html css

Html 向右浮动，不清除以前的浮动,html,css,css-float,Html,Css,Css Float,我知道显而易见的解决方案是将banner和main包装在一个浮动容器中，但是考虑到下面HTML的限制，有没有其他方法将侧栏添加到顶部漂浮 #横幅{ 宽度：70%；浮动：左；填充：10px；边框：1px纯蓝色； } #主要{ 宽度：70%；浮动：左；填充：10px；边框：1px实心橙色； } #边栏{ 宽度：25%；浮动：对；填充：10px；边框：1px纯绿色； } 横幅主要边栏你想让主栏和侧栏填满页面的高度吗？棒极了-差不多了（IE7说不）。你如何测试IE7？我使用

我知道显而易见的解决方案是将

banner

和

main

包装在一个浮动容器中，但是考虑到下面HTML的限制，有没有其他方法将

侧栏

添加到顶部


漂浮
#横幅{
宽度：70%；
浮动：左；
填充：10px；
边框：1px纯蓝色；
}
#主要{
宽度：70%；
浮动：左；
填充：10px；
边框：1px实心橙色；
}
#边栏{
宽度：25%；
浮动：对；
填充：10px；
边框：1px纯绿色；
}
横幅
主要
边栏

你想让主栏和侧栏填满页面的高度吗？棒极了-差不多了（IE7说不）。你如何测试IE7？我使用Spoon.net编译&它一个也没有！六羟甲基三聚氰胺六甲醚。。。我总是担心我的拷贝对本机安装的“真实性”。经过深思熟虑，我将绕过这些限制（这是一个古怪的模板），尝试在一个float包装器中工作，以获得内心的平静——尽管如此，感谢您的帮助！

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Floats</title>
    <style>

        #banner {
            width: 70%;
            float: left;
            padding: 10px;
            border: 1px solid blue;
        }

        #main {
            width: 70%;
            float: left;
            padding: 10px;
            border: 1px solid orange;
        }

        #sidebar {
            width: 25%;
            float: right;
            padding: 10px;
            border: 1px solid green;
        }

    </style>
</head>
<body>

    <div id="banner">
        Banner
    </div>

    <div id="main">
        Main
    </div>

    <div id="sidebar">
        Sidebar
    </div>

</body>
</html>

#sidebar {
    border: 1px solid green;
    display: inline-block;
    .display: inline;
    .zoom:1;
    padding: 10px;
    width: 22%;
}