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

- 日理万妓 2022-11-04 14:29 144阅读 0赞

1.**BFC布局**

> 触发BFC的情况：
> 
> 1.  根元素，float属性不为none，
> 2.  overflow的属性为：auto、scroll、hidden，
> 3.  display值为table-cell、table-capation和inline-block，
> 4.  position的值不为relative和static；
> 
>      满足以上任意一种均可触发BFC

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

![c266dd4230b14ede838f8d2ffbf563f1.png][]

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

![6445730da3040051cd2d57a3a880abcb.png][]

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

![448292048b6e5882bfff5c65e285fabf.png][]

[查看更多][Link 1]...

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）  
**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>

![20210304091621699.png][]

**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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70][]

**总结：**

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

推荐使用双飞翼布局

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

[c266dd4230b14ede838f8d2ffbf563f1.png]: /images/20221023/b9f3a34babde4fcd88ebbc2b81511e28.png
[6445730da3040051cd2d57a3a880abcb.png]: /images/20221023/1b3bacc9dcb04507a205c567578f18bd.png
[448292048b6e5882bfff5c65e285fabf.png]: /images/20221023/2ebe07fc907b4cac889b941204663528.png
[Link 1]: https://blog.csdn.net/qq_37430247/article/details/114360890
[20210304091621699.png]: /images/20221023/5af78f6ee3a344849643f632f6f8cb07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70]: /images/20221023/e72b87ec2d064dc59a11293fea4a7433.png