求助：如何用float实现div预期布局？当前排版异常需解决

你需要实现指定的Float排版，但当前代码存在标签错误、CSS属性拼写错误和浮动使用不当的问题，导致布局混乱。以下是具体修正方案：

核心问题梳理 #

• HTML标签不匹配：div2用</section>闭合、div3用<section>定义却用</div>闭合，标签首尾必须一致
• CSS属性拼写错误：high是错误写法，正确属性为height
• 无效Float值：float:center不存在，Float仅支持left/right/none；顶部（div1）和底部（div5）的通栏元素不需要浮动，反而需要清除浮动避免布局错乱
• 盒模型问题：未设置box-sizing:border-box，导致元素实际宽度可能超出父容器，破坏布局

修正后的CSS代码 #

* {
    font-family: Helvetica;
    box-sizing: border-box; /* 确保宽度包含内边距和边框 */
    margin: 0;
    padding: 0; /* 清除默认内外边距，避免布局偏移 */
}

#div1, #div5 {
    background: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    clear: both; /* 清除前面的浮动，保证通栏效果 */
}

#div2, #div3 {
    background: #EFEFEF;
    width: 55%;
    float: left;
    padding: 10px; /* 可选：添加内边距让内容不贴边 */
}

#div2 {
    height: 150px; /* 修正拼写错误 */
}

#div3 {
    height: 300px; /* 修正拼写错误 */
}

#div4 {
    background: #4FB3BF;
    width: 45%;
    height: 450px; /* 修正拼写错误 */
    text-align: center;
    float: right;
}

img {
    box-shadow: 10px 10px 7px DimGray;
    margin: 20px;
}

table, tr, td, th { /* 补充th的边框样式，保持表格样式统一 */
    border-style: solid;
    border-color: #4FB3BF;
    border-width: 1px;
    border-collapse: collapse;
}

table {
    margin: auto;
    width: 80%;
}

tr, td, th { /* 给th添加内边距，保持样式一致 */
    padding: 4px;
}

td:hover {
    background-color: #4FB3BF;
}

修正后的HTML代码 #

<body>
    <div id="div1">
        <h1>title</h1>
    </div>
    <!-- 右列div4移到左列前面，避免浮动元素换行 -->
    <div id="div4">
        <p>
            <img src="ryba1.jpg" alt="Sum">
        </p>
        <p><a href="data.txt">information</a></p>
    </div>
    <div id="div2">
        <h3>small text</h3>
        <ol>
            <li>skrypt</li>
        </ol>
    </div> <!-- 修正闭合标签为div -->
    <div id="div3"> <!-- 修正标签类型为div -->
        <h3>text</h3>
        <table>
            <tr>
                <th>1</th> <th>2</th> <th>3</th>
            </tr>
            <tr>
                <td>...</td> <td>...</td> <td>...</td>
            </tr>
        </table>
    </div> <!-- 修正闭合标签 -->
    <div id="div5">
        <p>Autor</p>
    </div>
</body>
</html>

关键调整说明 #

• 将右列div4移至左列元素之前：浮动元素会优先占据可用空间，先放右列再放左列能避免左列被挤到下一行
• 添加box-sizing:border-box：确保设置的宽度包含内边距和边框，避免元素实际宽度超出父容器
• 给div1和div5设置clear:both：清除前面的浮动，让它们作为通栏元素撑满整个宽度，不受浮动元素影响
• 修正所有标签不匹配和CSS拼写错误，保证代码语法正确

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