创建两列或三列基于浮动的布局

作者: xiaoguo16 | 来源:发表于2017-08-26 15:24 被阅读0次

创建两列或三列基于浮动的布局
前端面试问题汇总
基于浮动的布局（两列浮动布局、三列浮动布局）
2019-05-09 CSS布局相关
前端开发-常见CSS布局
三列布局，圣杯布局
css布局及居中
2020-06-12 面试
CSS之浮动元素影响清除方法归纳
css常见布局（一）

在设计网页布局时，经常需要设置两列或者三列的布局，这种设置最为简便的就是利用浮动。

两列布局

<style>
    .wrapper{
        width:960px;
        margin: 0 auto;
    }
    .content .secondary{
        width:200px;
        float:left;
    }
    .content .primary{
        float:right;
        width:calc(100% - 210px);
    }
    .content{
        overflow:auto;
    }
</style>
<body>
<div class="wrapper">
    <div class="header"></div>
    <div class="content">
        <div class="primary"></div>
        <div class="secondary"></div>
    </div>
    <div class="footer"></div>
</div>
</body>

代码详解：

html
首先需要先把html的布局规划好，最外层的wrapper包含所有的div，此处我们设置一个固定宽度，然后在wrapper里面设置页头，内容，页脚。在内容中设置两个列primary和secondary。primary为主内容，secondary为侧边栏。
css
主要就是给primary和secondary设置float属性，此处我给secondary设置的固定宽度，primary设置的计算后的宽度，中间留了一部分宽度作为两者的边距。
由于此处使用了浮动，所以需要清除浮动，方法为给它们的父元素content设置overflow属性为auto或者hidden。也可以给footer设置clear属性为both，清除浮动。

三列布局：

<style>
    .wrapper{
        width:960px;
        margin: 0 auto;
    }
    .content .secondary{
        width:200px;
        float:left;
    }
    .content .primary{
        float:right;
        width:calc(100% - 210px);
    }
    .content{
        overflow:auto;
    }
    .content .primary .primary{
        float: left;
        width: calc(100% - 100px);
    }
    .content .primary .secondary{
        float: right;
        width: 80px;
    }

</style>
<body>
<div class="wrapper">
    <div class="header"></div>
    <div class="content">
        <div class="primary">
            <div class="primary"></div>
            <div class="secondary"></div>
        </div>
        <div class="secondary"></div>
    </div>
    <div class="footer"></div>
</div>
</body>

三列布局与两列布局原理是相同的，只是在primary的元素框中再加入两个div，并且两个div分别左右浮动。