css布局基础单位
- Box : CSS布局的基本单位
Box是CSS布局的对象和基本单位 , 直观点来说 , 就是一个页面是由多个BOX组成的 , 元素的类型和display属性 , 决定了这个box类型 , 不同类型的box , 会参与不同的FormattingContext ( 一个决定如何渲染文档的容器 ) , 因此Box内的元素会以不同的方式渲染 , 让我们看看有哪些盒子 :
- block-level box:display 属性为block , list-item , table 的元素 , 会生成block-levelbox, 并且参与block fomatting context ;
- inline-level box:display属性为 inline , inline-block , inline-table的元素 , 会生成inline-level box , 并且参与block fomatting context ;
Fomatting context 是w3c css2.1规范中的一个概念 , 它是页面中的一块渲染区域 , 并且有一台渲染规则 ,他决定了其子元素将如何定位 , 以及和其他元素的关系和相互作用 , 最常见的Fomatting context 有block fomatting context(BFC) 和inline formatting context(简称IFC)
什么是BFC
- BFC全称 --- 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
BFC布局规则
- 每个元素的marginbox的左边 , 与包含块border box的左边相接触 ( 对于从左往右的格式化 , 否则相反 ) , 即使存在浮动也是如此
- BFC的区别不会与float box重叠
创建BFC的Box方式
- 根元素(<html>)
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content或 paint 的元素
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
- 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
- column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
注意 : BFC( 块格式化上下文 ) 对浮动定位 与 清除浮动 都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
BFC例子
让浮动内容和周围的内容等高
代码
html部分
<!--html部分-->
<div class="box">
<div class="float">我是浮动元素, 带透明背景色</div>
<div>我在标准元素内</div>
</div>
css部分
/* css部分 */
.box {
background-color: green;
padding: 50px;
}
.float {
float: left;
width: 100px;
height: 150px;
background: rgba(255,2,3,0.3);
border: 1px solid black;
}
效果图
让浮动内容和周围的内容等高.png
使用overflow: auto
创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。
一个简单的例子 , 父盒子下有多个float标签 , 导致父盒子高度塌陷的问题 , 我们就需要在父盒子添加overflow: auto属性即可
例子如下
html部分
<div class="box">
<div class="float">我是浮动元素, 带透明背景色</div>
<div>我在标准元素内</div>
</div>
css部分
.box {
background-color:green;
overflow: auto;
}
.float {
float: left;
width: 100px;
height: 150px;
background: rgba(255,0,0,0.3);
padding: 10px;
}
效果图如下
使用overflow: auto.png
还有一个解决方法 , 就是在父盒子闭合前添加块级一个元素 , 并设置clear: both ; 一般使用伪元素作为清除浮动的方法修改上面css代码如下
.box {
background-color:green;
/* overflow: auto; */ /* 把这个删掉 */
}
.box::after{ /* 添加伪元素 ::after , 即在父盒子闭合前的元素 */
content: "";
display: block;/* 一定要是块级元素 */
clear: both;/* 前后浮动都清除 */
}
.float {
float: left;
width: 100px;
height: 150px;
background: rgba(255,0,0,0.3);
padding: 10px;
}
BFC外边距塌陷
- 在两个BFC盒子之间 , 会出现外边距合并的问题这里蓝色盒子和绿色盒子上下外边距都为50px , 但是他们会共用外边距
代码如下
html部分
<div class="blue">我下外边距50px</div>
<div class="green-inner">我上外边距50px</div>
css部分
.blue {
background: blue;
}
.green-outer {
overflow: hidden;
background: green;
}
效果如下
BFC外边距塌陷.png
解决方法 , 在一个BFC盒子上或者有影响的BFC盒子外面套一个div , 然后设置外层div的overflow: auto
代码如下
html部分
<div class="blue">我下外边距50px</div>
<div class="green-outer">
<div class="green-inner">我上外边距50px</div>
</div>
css部分
.blue {
background: blue;
}
.blue,
.green-inner {
height: 50px;
margin: 10px 0;
}
.green-outer {
overflow: hidden;
background: transparent;
}
效果如下 , 这也上下BFC盒子的外边距就不受影响了
解决BFC盒子的外边距.png
