页面布局左右固定与自适应（两栏布局）_html 两栏自适应-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52819902/article/details/122538123

本文介绍了如何使用CSS实现两栏布局，包括通过相对定位和浮动，以及绝对定位的方法，同时讲解了BFC规则在解决布局问题中的应用，如使用`clear:both`或`overflow:hidden`来防止元素浮动影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.相对定位

给左侧div添加浮动，可以使右侧设置一个marging-left使其宽度自适应

<style>
        body,html{margin: 0;padding: 0;}
        .left{
            float:left ;
            background: #0f0;
            width: 200px;
            height: 300px;
        }
        .right{
            height: 100px;
            margin-left: 200px;
            background: #00f;
        }
        .bottom{
            background: #f00;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="left">浮动区域</div>
        <div class="right">自适应区域</div>
    </div>
    <div class="bottom">测试布局</div>

但是我们发现bottom盒子也受到了浮动的影响也在右侧，解决办法就是在bottom样式中添加clear:both;或者添加overflow: hidden;

2.绝对定位

左侧添加position:absolute

<style>
        body,html{margin: 0;padding: 0;}
        .left{
            position: absolute;
            background: #0f0;
            width: 200px;
            height: 300px;
        }
        .right{
            height: 100px;
            margin-left: 200px;
            background: #00f;
        }
        .bottom{            
            width: 100%;
            /* position: absolute;  */
            /* top: 300px; */
            background: #f00;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="left">固定区域</div>
        <div class="right">自适应区域</div>
    </div>
    <div class="bottom">测试布局</div>
</body>

但是我们发现测试布局位置不对，这是也可以添加一个绝对定位，然后设置top的值即可

.bottom{            
            width: 100%;
            position: absolute; 
            top: 300px;
            background: #f00;
            clear:both;
        }

如果左侧高度比右侧自适应高，那么测试区域可以不设置绝对定位和高度

        .left{
            position: absolute;
            background: #0f0;
            width: 200px;
            height: 100px;
        }
        .right{
            height: 300px;
            margin-left: 200px;
            background: #00f;
        }

        .bottom{            
            width: 100%;
            /* position: absolute;
            top: 300px; */
            background: #f00;
            /* clear:both; */
        }

BFC规则

        .left {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
        }
        .right {
            height: 200px;
            background: #fcc;
            /* overflow: hidden; */
        }
        .bottom{            
            width: 100%;
            background: #f00;
        }

正常不设置marging-left会导致left看起来在right内部