本文围绕CSS展开，介绍了两栏和三栏布局的多种实现方式，如float、flex、grid等布局方法。还阐述了格式化上下文（FC）的相关知识，包括IFC、BFC、GFC、FFC的特性、触发条件及应用，同时对比了FFC与BFC的区别。
两栏布局
1. float + margin-left
使用float：left，将左边块的位置固定，再margin-left；将左边框的位置空出来，构成两栏布局。
<div class="left"> 123 </div>
<div class="right"> 456 </div>
*{
margin: 0px;
padding: 0px;
}
.left{
height: 30px;
width: 200px;
background-color: red;
float: left;
}
.right{
height: 30px;
background-color: green;
margin-left: 200px;
}
实例显示
2. absolute + margin-left
使用绝对定位，将左边的块分好地方，再使用margin-left；将其位置空出来，构成两栏布局。
*{
margin: 0px;
padding: 0px;
}
.left{
height: 30px;
width: 200px;
background-color: red;
float: absolute;
}
.right{
height: 30px;
background-color: green;
margin-left: 200px;
}
实例显示
3. flex布局·
将父级设置为flex属性，使用flex布局方式，默认由左至右，给左边子级设置宽度flex-basis；右边子级设置flex：auto；自动填充剩下部分；构成两栏布局。
<div class="container">
<div class="left">123 </div>
<div class="right">456</div>
</div>
.container{
width: 100%;
height: 100px;
display: flex;
}
.left{
flex-basis: 200px; /*定宽*/
background-color: red;
}
.right{
flex: auto; /*自动填满*/
background-color: green;
}
实例显示
4. grid布局
使用grid布局，将父级设置为grid布局方式，再使用 grid-template-columns设置每一列的宽度，设置两列的宽度构成两栏布局。
.container{
width: 100%;
display: grid;
grid-template-columns: 200px auto; /*设置每一列的宽度*/
}
.left{
background-color: red;
}
.right{
background-color: green;
}
三栏布局
1. flex布局
将父级设置为flex属性，使用flex布局方式，默认由左至右，给左边和右边子级设置宽度width；中间子级设置flex：auto；自动填充剩下部分；构成三布局。
<div class="container">
<div class="left">123 </div>
<div class="mai'n">456</div>
<div class="right">789</div>
</div>
.container{
width: 100%;
height: 100px;
display: flex;
}
.left{
width: 200px; /*定宽*/
background-color: red;
}
.main{
flex:auto;
border:1px solid blue;
}
.right{
width:200px;
background-color: green;
}
实例显示
2. 浮动布局：float + margin
基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧
- 两边固定宽度，中间宽度自适应。
- 利用中间元素的margin值控制两边的间距
- 宽度小于左右部分宽度之和时，右侧部分会被挤下去
<div class="container">
<div class="left">123 </div>
<div class="right">789</div>
<div class="main">456</div>
</div>
.container{
padding: 20px;
overflow: hidden;
background-color: #eee;
}
.left{
float:left;
height:100%;
width:100px;
background-color: red;
}
.right{
float: right;
height:100%;
width:200px;
background-color: green;
}
.main{
height:100%;
margin-left: 120px;
margin-right: 220px;
background-color: blue;
}
实例显示
3. position实现、
基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序。
缺点：有顶部对齐问题，需要进行调整，注意中间的高度为整个内容的高度
.container{
background-color: rgb(78, 76, 76);
}
.left{
height:100%;
width:100px;
position: absolute;
top:0;
left:0;
background-color: red;
}
.right{
height:100%;
width:200px;
position: absolute;
top:0;
right:0;
background-color: green;
}
.main{
height:100%;
margin: 0 220px 0 120px;
background-color: blue;
}
实例显示
4. float和BFC配合圣杯布局
必须将中间部分的HTML结构写在最前面，三个元素均设置向左浮动。两侧元素宽度固定，中间设置为100%；然后利用左侧元素负的margin值进行偏移，覆盖在中间的宽度之上；右侧的元素同样利用负的margin值进行覆盖
<div class="container">
<div class="middle">
<div class="main">456</div>
</div>
<div class="left">123 </div>
<div class="right">789</div>
</div>
.container{
overflow: hidden;
}
.left{
height:100%;
width:100px;
float: left;
margin-left: -100%;
background-color: red;
}
.middle{
float: left;
width: 100%;
background-color: gray;
}
.right{
height:100%;
width:200px;
float: left;
margin-left: -200px;
background-color: green;
}
.main{
margin: 0 220px 0 120px;
background-color: blue;
}
实例显示
5. table布局
将父级设为table属性，其子元素都设为单元格，table-cell，
注意，需要将左中右按顺序写。
<div class="container">
<div class="left">123 </div>
<div class="main">456</div>
<div class="right">789</div>
</div>
.container{
display: table;
width: 100%;
}
.container>div{
display: table-cell;
}
.left{
width:100px;
background-color: red;
}
.right{
width:200px;
background-color: green;
}
.main{
margin: 0 220px 0 120px;
background-color: blue;
}
6. 总结
纯float的三栏布局需要将中间的内容放在最后；
绝对定位的三栏布局：元素对齐有点问题
圣杯布局：容器内不能撑开高度
flex布局，基本没有大的缺点
fc（格式化上下文）
Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。
1. IFC
(Inline Formatting Contexts)直译为"行内格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)
IFC有的特性
-
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
-
IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
IFC的应用
- 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
- 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
BFC
Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC特性
- 内部的盒会在垂直方向一个接一个排列；
- 处于同一个BFC中的元素相互影响，可能会发生外边距叠加，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加；
- 每个元素的margin box的左边，与容器块border box的左边相接触；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
- 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
- BFC的区域不会与float 的元素区域重叠。
触发BFC特性的
- body 根元素
- 浮动元素：float 不是 none
- 绝对定位：position 为 absolute 或 fixed
- 行内块元素（元素的 display 为 inline-block）
- overflow 值不为 visible 的块元素
- display 值为 table-cell, table-caption, inline-block，flow-root
GFC
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。
FFC
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
扫一扫
1736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
