如何用Float实现两个侧边盒子高度始终一致（禁用Flexbox与Overflow）

首先修正你原代码里的HTML结构问题——原代码存在标签嵌套错误、重复闭合的情况，这会直接导致布局异常，先把结构理顺：

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <title>Layout Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <header>
            <h1>Hej Header</h1>
        </header>
        <div class="content-container">
            <section id="s1">
                <h1>Här är sektion nummer ett</h1>
                <h1 class="rubrik1">Högskolan Nivå 1</h1>
                <p id="p1"> Zombie <a href="images/dollar.png">zombies</a> ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. </p>
                <h2 class="rubrik2">Rubrik 2</h2>
                <p id="p2"> Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
                <h3 class="rubrik3">Rubrik 3</h3>
                <p id="p3"> Zonbi asdasdasdadasdasdas asd asdasdasd a das dasd as dasd as das dtattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. </p>
            </section>
            <section id="s2">
                <h2>Här är sektion nummer två</h2>
                <!-- 可以添加更多内容测试等高效果 -->
            </section>
        </div>
        <footer>
            <h1>Hej Footer</h1>
        </footer>
    </div>
</body>
</html>

接下来是CSS部分，因为要求用float且不能用overflow，我们用负margin+超大padding的经典技巧实现等高，同时处理好浮动清除：

@font-face { 
    font-family: MuseoSans; 
    src: url('fonts/MuseoSans_500.otf'),
         url('fonts/MuseoSans_500.ttf');
}
@font-face { 
    font-family: RobotoCondensed; 
    src: url('fonts/RobotoCondensed-Italic.ttf'); 
}

/* 基础重置：消除默认边距，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #eee;
}

p {
    font-family: Helvetica, Arial, Sans-serif;
    color: #222;
    font-size: 14px;
    margin: 10px 0;
}

.rubrik1 {
    font-family: MuseoSans, helvetica, sans-serif;
    color: #009;
    font-size: 28px;
    margin: 15px 0;
}
.rubrik2{
    font-family: RobotoCondensed, helvetica, sans-serif;
    color: #009;
    font-size: 16px;
    margin: 12px 0;
}
.rubrik3 {
    font-family: Helvetica, Arial, Sans-serif;
    color: #009;
    font-size: 14px;
    margin: 10px 0;
}

.wrapper {
    width: 960px;
    margin: 0 auto;
    background-color: white;
    border: 1px solid #ccc;
}

header {
    border-style: double;
    height: 140px;
    padding: 20px;
}

footer {
    border-style: double;
    height: 200px;
    padding: 20px;
    clear: both; /* 清除浮动，避免被上方栏覆盖 */
}

/* 包裹两个等高栏的容器 */
.content-container {
    padding: 0 12px;
}

/* 等高核心：给两个栏加超大padding-bottom，再用负margin-bottom抵消 */
#s1, #s2 {
    float: left;
    border-style: double;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    padding: 12px;
}

/* 设置两栏不同宽度 */
#s1 {
    width: 600px;
    margin-right: 12px; /* 两栏之间留间距 */
}

#s2 {
    width: 324px; /* 960总宽 - 600左栏 -12间距 -24左右padding = 324 */
}

/* 清除浮动：用伪元素确保容器能包裹住浮动的子元素 */
.content-container::after {
    content: "";
    display: table;
    clear: both;
}

关键说明 #

1. 结构修正：把两个栏放在统一容器里，修复了原代码中nav标签重复闭合、嵌套混乱的问题，保证布局逻辑清晰。
2. 等高实现：通过padding-bottom:9999px让栏的高度“延伸”到足够长，再用margin-bottom:-9999px抵消额外高度，视觉上两栏始终等高，且不需要依赖overflow:hidden。
3. 浮动处理：用伪元素clearfix清除浮动，避免父容器塌陷；给footer加clear:both，防止被上方浮动元素覆盖。
4. 盒模型优化：box-sizing:border-box让padding和border不会额外增加元素宽度，宽度计算更直观。

内容的提问来源于stack exchange，提问作者zveuse