一、BFC
BFC(Block Formatting Context)块级格式化上下文。它是一个独立的渲染区域。
它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系。
满足下列条件之一就可触发BFC
- 根元素
- float的值不为none
- overflow的值不为visible(hidden、auto、scroll)
- display的值为inline-block、table-cell、table-caption、flex
- position的值为absolute或fixed
BFC布局
- 内部的Box会在垂直方向,一个接一个地放置
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时,浮动元素也参与计算
BFC的作用
- 自适应两栏布局
- 可以阻止同级元素被浮动元素覆盖
- 可以包含浮动元素——清除内部浮动
- 分属于不同的BFC时可以阻止margin重叠
注意:
margin重叠:
相邻元素又一个触发了BFC,相邻元素上下margin不会重叠,跟父元素是不是BFC布局无关
margin传递:
如果父元素没有padding和border,那么父元素的maring会和子元素的margin重叠,将父元素设置为BFC,就可以避免这种情况
二、IFC
IFC布局
- 内联元素会在水平方向一个个地放置
- IFC地高度是由最高盒子的高度决定地
- 当一行不够放置的时候会自动切换到下一行
- 内部元素水平方向的margin、padding、border有效,垂直方向上无效。
三、FFC
弹性布局(FFC-Flex Formattig-Contexts 自适应格式化上下文)
容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-item
- align-content
项目属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
四、普通文档流
布局
- 浮动的元素是不会被父级计算高度
- 非浮动元素会覆盖浮动元素的位置
- margin会传递给父级
- 两个相邻元素上下margin会重叠
五、经典布局
CSS 有两个经典的布局-圣杯布局和双飞翼布局
他们的共同点
- 两侧宽度固定,中间宽度自适应
- 中间部分在DOM结构上优先,以便先行渲染
- 允许三列中的任意一列成为最高列
圣杯布局
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
#container {
width: 500px;
height: 500px;
padding-left: 200px;
padding-right: 150px;
background: gray;
}
#center {
background: red;
width: 100%;
height: 100%;
}
#left {
background: yellow;
width: 200px;
height: 100%;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
background: green;
width: 150px;
height: 100%;
margin-right: -150px;
}
.column {
float: left;
}
双飞翼布局
双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center,另外将.column类从center移至container上。
<div class="wrap">
<div id="container" class="column">
<div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
.wrap {
width: 500px;
height: 300px;
background: gray;
}
#container {
width: 100%;
background: red;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
background: yellow;
width: 200px;
margin-left: -100%;
}
#right {
background: green;
width: 150px;
margin-right: -150px;
}
.column {
float: left;
height: 100%;
}
两者区别
圣杯布局有个问题,当面板的main部分比两边的子面板宽度小的时候,布局就会乱掉。因此也就有了双飞翼布局来克服这个问题。如果不增加任何标签,想实现更完美的布局非常困难,因此双飞翼布局在主面板上选择了添加一个标签。
- 双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间
- 圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局的问题
- 双飞翼布局不用设置相对布局,以及对应的left和right值。
六、圣杯布局三种方式
所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应。我们可以用浮动、定位以及flex这三种方式来实现
flex实现
<div id="container">
<div id="left" class="column">left</div>
<div id="center" class="column">center</div>
<div id="right" class="column">right</div>
</div>
#container {
width: 500px;
display: flex;
}
#left{
background: red;
flex:0 0 100px;
}
#center{
flex:1;
background: blue;
}
#right{
background: red;
flex:0 0 100px;
}
position 实现
<div id="container">
<div id="left" class="column">left</div>
<div id="center" class="column">center</div>
<div id="right" class="column">right</div>
</div>
#container {
width: 500px;
position: relative;
padding-left: 100px;
padding-right: 100px;
}
#left{
background: red;
width: 100px;
position: absolute;
left: 0;
top: 0;
}
#center{
background: blue;
width: 100%;
}
#right{
background: red;
width: 100px;
position: absolute;
top: 0;
right:0
}
float实现
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
#container > div {
height: 100px;
float: left;
}
#container {
width: 500px;
}
#left{
background: red;
width: 100px;
margin-left: -100%;
}
#center{
background: blue;
margin-left: 100px;
margin-right: -100px;
}
#right{
background: red;
width: 100px;
margin-right: -100px;
}