圣杯布局详解–浮动

圣杯布局是什么：

• 圣杯布局是两边固定宽度，中间自适应的三栏布局。
• 中间栏放到文档流前面，先行渲染。
• 目的是为了解决三栏布局。

浮动实现：

实现效果：

首先HTML：

• 头部<header></header>标签，
• 内容区域<div class="container"></div>里面包含中、左、右三个 div 标签。
• 底部<footer></footer>标签

HTML代码：

	//标题
    <header><h4>Header内容区</h4></header>
    //内容区
    <div class="container">
    	//中间区域
        <div class="middle column">
            <h4>中间区域</h4>
            <p>圣杯布局要求header和footer各自占领屏幕所有宽度，高度固定
                中间的container是一个三栏布局
                三栏布局两侧宽度固定不变，中间部分自动填充整个区域
                中间部分的高度是三栏中最高的区域的高度
            </p>
        </div>
        //左边区域
        <div class="left column">
            <h4>左边栏</h4>
        </div>
        //右边区域
        <div class="right column">
            <h4>右边栏</h4>
        </div>
        //清除浮动
        <div style="clear: both"></div>
    </div>
    //底部
    <footer><h4>Footer内容区</h4></footer>

CSS代码：

• 首先我们设置中间三栏 中、左、右三个div浮动。

• 我们设置中间 <div class="middle"></div>的css宽度为100%占满整个大div,那么此时左右div块会被挤到下方去。（如下图所示）

• 此时我们要设置外层内容区域的div左右padding以便给左右div回来时候一个位置。(效果如下图所示)

• 接下来我们要使左边栏回到上一行我们要给<div class="left"></div>一个相对定位（相对于其正常位置进行定位）position:relative和margin-left:-100%（为什么是100%？因为设置100%后它可以刚好和middle中间栏的左侧对齐）;

• 我们要给<div class="left"></div>添加right: 200px;样式属性使其回到第一行的最左侧。

• 相同原理我们给右栏一个margin-right: -150px;使其回到原来位置，那么这个布局就完成啦。

		*{ 
            margin: 0;
            padding: 0;
        }
        body{ 
            min-width: 550px;
        }
        header{ 
            height: 40px;
            background-color: #50a0c3;
            padding-top: 10px;
            text-align: center;
            line-height: 40px;
            color: white;
        }
        .container{ 
            padding-left: 200px;
            padding-right: 150px;
        }
        .column{ 
            float: left;
        }
        .middle{ 
            width: 100%;
            height: 350px;
            background-color: salmon;
            text-align: center;
            padding-top: 50px;
        }
        .left{ 
            width: 200px;
            height: 400px;
            background-color: #d8e6a4;
            margin-left: -100%;
            position: relative;
            right: 200px;
            text-align: center;
            line-height: 400px;
        }
        .right{ 
            width: 150px;
            height: 400px;
            margin-right: -150px;
            text-align: center;
            line-height: 400px;
            background-color: #bed28c;
        }
        footer{ 
            width: 100%;
            height: 40px;
            background-color: #5b6063;
            text-align: center;
            line-height: 40px;
        }

本文地址：https://blog.csdn.net/weixin_43690348/article/details/111130809