BFC布局、圣杯布局和双飞翼布局（众享极致）

1.BFC布局

触发BFC的情况：

根元素，float属性不为none，

overflow的属性为：auto、scroll、hidden，

display值为table-cell、table-capation和inline-block，

position的值不为relative和static；

满足以上任意一种均可触发BFC

1.自适应两栏布局(overfolw:hidden触发BFC)

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .aside {
        float: left;
        width: 100px;
        height: 200px;
        background: #f0f;
    }
    .main {
        overflow: hidden; 
        height: 250px;
        background: #f00;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main">
        123456789112345678910
        1234567891012345678910
        1234567891012345678910
        1234567891012345678910
        1234567891012345678910
        1234567891012345678910
    </div>
</body>

2.清除浮动(overfolw:hidden触发BFC)

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .par {
        overflow: hidden;
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

3.防止垂直margin重叠（overflow:hidden触发BFC，如果第二个P元素外面没有包裹wrap并触发wrap生成BFC，那么两元素的margn应该合并为100px）

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
2.双飞翼布局
(使用float布局框架，用margin为负值)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>双飞翼布局</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.header,
		.footer {
			background: gray;
			width: 100%;
		}

		.main>div {
			float: left;
		}

		.left {
			width: 200px;
			background: red;
			margin-left: -100%;
		}

		.right {
			width: 200px;
			background: blue;
			margin-left: -200px;
		}

		.content {
			width: 100%;
			background: yellow;

		}

		.center {
			margin-left: 200px;
			margin-right: 200px;
		}
	</style>
	<body>
		<div class="main">
			<div class="header"><h1 style="text-align: center;">双飞翼布局(使用float布局框架 ， 用margin为负值)</h1></div>
			<div class="content">
				<div class="center">
					2
				</div>
			</div>
			<div class="left">
				1
			</div>
			<div class="right">
				3
			</div>
			<div class="footer">底部</div>
		</div>
	</body>
</html>

3.圣杯布局
（使用float布局框架，用margin为负值， position: relative定位）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>圣杯布局</title>
	</head>
	<style type="text/css">
		body {
			min-width: 550px;
		}

		* {
			margin: 0;
			padding: 0;
		}

		.header,
		.footer {
			background: gray;
			width: 100%;
		}

		.footer {
			clear: both;
		}
		/* 中间宽度100% ,然后用padding把中间的距离留出来 */
		.content {
			height: 200px;
			padding: 0 150px 0 200px;
			background: greenyellow;
			
		}

		.left,
		.center,
		.right {
			float: left;
		}

		.center {
			width: 100%;
			height: 200px;
			background: red;
		}

		.left {
			width: 200px;
			height: 200px;
			background: yellow;
			margin-left: -100%;
			position: relative;
			left: -200px;
		}

		.right {
			width: 150px;
			height: 200px;
			background: gainsboro;
			margin-left: -150px;
			position: relative;
			left: 150px;
	</style>
	<body>

		<div class="header"><h1 style="text-align: center;">圣杯布局(/* 中间宽度100% ,然后用padding把中间的距离留出来 */)</h1></div>
		<div class="content">
			<div class="center">2</div>
			<div class="left">1</div>
			<div class="right">3</div>
		</div>
		<div class="footer">底部</div>
	</body>
</html>

总结：

优点**
（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
（2）可以实现主要内容的优先加载

推荐使用双飞翼布局

附：
其实三列布局的方式还有很多，但也有各自的缺点
1 如果左右两列用position: absolute定位布局做外层设计需要有个包含块设置（否则是相对浏览器可视区域）这样会层级，页面控制相对麻烦
2 用浮动布局的话，中间层要做到先加载实现不了
3 flex布局低版本浏览器有些还不支持
————————————————

BFC布局、圣杯布局和双飞翼布局（众享极致）

猜你喜欢