如何为网站main区域实现美观两栏布局并正确清除浮动？

实现方案 #

我们仅需要调整少量HTML结构并补充对应CSS样式即可实现需求，导航、页脚、通栏标题的样式完全保留原有效果，同时所有浮动都会做规范清除：

第一步：调整main区域的HTML结构

原有main里的banner为通栏内容不需要改动，我们给下方需要分栏的内容套上外层容器，再拆分为左右两栏即可，修改后的main结构如下：

<main class="wrapper">
    <!-- 原有通栏banner 完全保留不动 -->
    <div class="banner">
        <h1><span class="name">Augie's Custom T-shirts</span></h1>
        <h2>Custom T-shirts for you or your party.</h2>
        
        <div class="bulletPoints">
            <ul>
                <li>Birthday parties</li>
                <li>Vacation groups</li>
                <li>Bachelorette Parties</li>
                <li>Family reunions</li>
                <li>Work team rewards</li>
                <li>Business promotions</li>
            </ul>
        </div>
        <br/>
    </div>
    <!-- 新增分栏外层容器 -->
    <div class="two-col-wrapper">
        <!-- 左栏 可根据需求调整放入的内容 -->
        <div class="col-left">
            <p id="Catch">          
            Do you have an event coming up, and want everyone to get in the spirit?  T-shirts can bring a group together, make everyone feel connected, and let everyone know what you're celebrating.
            </p>
            <p>T-shirts can also be a great gift to someone that acknowledges their special interest or hobby.</p>
            <p>Choose from one of our unique designs, or let us put your own design on a shirt for you.</p>
            <div class="row">
                <div class="column">
                    <img src="images/gorilla.jpg" alt="Gorilla" style="width:100%">
                </div>
                <div class="column">
                    <img src="images/pink.jpg" alt="Pink" style="width:100%">
                </div>
                <div class="column">
                    <img src="images/skull.jpg" alt="Skull" style="width:100%">
                </div>
            </div>
            <p><strong>How it works:</strong></p>
            <p>Browse our selection of unique designs, select the size and colors of the shirts you would like, and place your order.  We will ship your shirts within three business days for in-stock shirts, or five days for custom size and colors.</p>
        </div>
        <!-- 右栏 可根据需求调整放入的内容 -->
        <div class="col-right">
            <figure>
                <img src="images/t-shirt-colors.jpeg" alt="T-shirt colors" class="image1">
                <figcaption>Choose from are variety of t-shirt colors!</figcaption>
            </figure>
            <p>Have a design of your own?  Can't find the right sentiment?  Call or email us to discuss the possibilities or get some ideas for your event.</p>
            <p>Please note there will be a one time $15 charge for any custom graphics design.</p>
            <h2><em>Contact us today!</em></h2>
        </div>
    </div>
</main>

其他HTML代码完全不需要修改。

第二步：补充/修改CSS代码

在原有CSS的基础上新增以下样式即可，原有样式除了补充浮动清除之外完全保留：

/* 1. 给导航加规范的浮动清除，替换原有的<br>清浮动方式，你可以删掉nav里的两个<br>标签了 */
.nav::after {
    content: "";
    display: table;
    clear: both;
}

/* 2. 两栏布局样式 */
.two-col-wrapper {
    display: flex;
    gap: 30px; /* 左右栏间距 可自行调整数值 */
    margin-top: 20px;
}
.col-left {
    flex: 1; /* 左栏占1份宽度 */
}
.col-right {
    flex: 1; /* 右栏占1份宽度 两栏均分 */
    /* 如果需要不等宽 比如左6右4 可以改成flex: 0 0 40% */
}

/* 3. 小屏适配 可选，窄屏下自动变回单列 */
@media (max-width: 768px) {
    .two-col-wrapper {
        flex-direction: column;
    }
}

其他说明

• 左右栏的内容可以根据你的展示需求自行调换，只要放在对应的col-left和col-right容器里即可
• 所有浮动都已经通过伪元素做了规范清除，不会出现高度塌陷、布局错乱的问题
• 原有导航、页脚、banner的所有样式完全保留，没有做任何修改

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