Web前端知识点-双飞翼布局全过程解析
双飞翼布局是经典的左中右三列自适应布局方式，两边列宽度固定，中间内容列宽度自适应，且中间列在HTML中位于左右两列的前面，能保证优先加载，方法简单直接。本文对这种经典的布局方式做了详细的解析，在理解的基础上就能够更加灵活的将其运用在实际布局中。
目标：实现一个左中右三列布局，左右两列宽度固定，中间内容区列宽度能够自适应
新建页面，在父元素div#box中添加三个div，分别是div#center、div#left、div#right
分别设置背景色以便于观察
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
#box{border: 1px solid;width: 90%;margin: 0 auto;}/*设置包裹左中右三列元素的盒子页面居中，宽度占body的100%*/
#center{background: silver;}
#left{width: 300px;background: pink;}
#right{width: 300px;background: skyblue;}
</style>
</head>
<body>
<div id="box">
<div id="center">div#center</div>
<div id="left">div#left</div>
<div id="right">div#right</div>
</div>，
</body>
</html>
初始页面渲染
第一步：要实现左中右布局，就要先打破原有标准流布局，这里使用float属性让三个div都脱离标准流向左浮动
由于脱离标准流，不再占用原来空间，导致父元素塌陷，需要先清除浮动，这里给父元素div#box设置overflow:hidden属性来清除浮动带来的影响。
解决了父元素高度塌陷问题后，还有一个问题是这里中间列div#center因为没有固定宽度，在设置浮动之后，其宽度会自动收缩为内容的宽度，所以要实现中间内容区的自适应效果就需要设置其宽度为父元素的100%，重新加载
又有了新的问题，div#center的宽度是自适应了，但它一个占满了整个父元素的宽度，把后面的两个元素div#left和div#right都挤下去了，不能在一行上显示。所以接下来的关键问题是如何让左右两列和中间列处于同一水平线上
第二步：巧妙使用负margin属性让左右两列与中间列处于同一水平线上
首先要让div#left移动到div#box的最左侧，这里元素已经设置了浮动属性，可以通过设置div#left的margin-left为-100%来让它在div#box中左移一个父容器的宽度
接下来再让div#right移动到div#box的最右侧，这里需要设置div#right的margin-left为-300px，在父盒子中左移一个自身的宽度
以上利用父margin-left能够让元素左移的特点使左中右三列处于同一水平线上，但是离最终的目标还有一步，仔细看，div#center的内容不见了，究其原因就是因为三个子元素设置了浮动属性，脱离标准流，后浮动上去的元素盖住了和先浮动上的元素重叠的部分，div#center两边分别300px的宽度都被盖住了，所以最后要想办法让被盖住的这部分和左右两列进行视觉上的分离
第三步：在中间列中增加一个div内容元素，设置其margin值为左右两列的宽度
具体是在div#center增加子元素div#container，并设置div#container的宽度为父元素的100%，左右外边距均为300px，加载如下
因为div#box的宽度为100%，所以随浏览器宽度伸缩，都能实现左右两列固定，中间自适应的布局要求。如，浏览器宽度变窄时，效果如下
以上过程完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
#box{border:1px solid black;width: 100%;margin: 0 auto;overflow: hidden;}
#center{width: 100%;background: silver;float: left;}
#left{width: 300px;background: pink;float: left;margin-left: -100%;}
#right{width: 300px;background: skyblue;float: left;margin-left: -300px;}
#container{width: 100%;margin:0 300px;}
</style>
</head>
<body>
<div id="box">
<div id="center" ><div id="container">【div#center】</div> </div>
<div id="left">【div#left】</div>
<div id="right">【div#right】</div>
</div>
</body>
</html>
到此便实现了左中右三列，两边列固定，中间列自适应的布局目标。
以上方法简单直接，HTML中，中间列放在左右列的前面，保证主内容先行渲染，三列都采用左浮动，通过负margin使三列在同一水平线上显示，最后又通过在中间列嵌套一个div，并对嵌套的div设置margin-left和margin-right为两列的宽度解决了内容区被左右两列遮挡的问题，中间栏同时也保持了自适应的特性。浏览器兼容性好。是实际布局中推荐使用的方式。
注：感谢华为云平台张宇老师的讲解，以上个人理解如有疏漏之处，欢迎指正，我们一起成长快乐！
- 点赞
- 收藏
- 关注作者
评论（0）