BFC
BFC概念：
解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
**Box：CSS 布局的基本单位，直观来说，一个页面就是由若干盒子组成。display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
1、block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
2、inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
3、run-in box: 存在于css3 中。
Formatting Context：W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
————————————————
BFC布局规则：
①内部的Box会在垂直方向，一个接一个地放置。
②Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）。
③每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
④BFC的区域不会与float box重叠。
⑤BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
⑥计算BFC的高度时，浮动元素也参与计算。
————————————————
BFC触发条件（保证前提）：
①根元素(html)
②float属性不为none
③position为absolute或fixed
④display为inline-block, table-cell（类似td元素，能够实现文字垂直居中效果）, table-caption（表格标题）, flex（弹性盒模型对象子元素都有相同的长度，且忽略它们内部的内容）, inline-flex（将对象作为内联块级弹性伸缩盒显示）。
⑤overflow不为visible（默认值，内容不会被修剪，会呈现在元素框之外）
————————————————
BFC应用：
1、自适应两栏布局（实际上就是利用布局规则第③④条利用overflow:hidden触发使其div:right成为BFC）
2、清除内部浮动（我们都知道，在父元素不设置高度的情况下，子元素浮动会造成高度塌陷的问题。这里实际上是利用布局规则第⑥条，同样利用overflow:hidden触发使其父元素成为BFC）
3、防止margin上下重叠（根据布局规则第二条在同一盒子内的两个P标签margin值重叠显示，解决方法就是让其中P标签触发成为BFC或者两个都触发成为BFC，成为独立容器隔离，margin值就会恢复分开显示）
————————————————
定位属性及概念（以下内容纯属我个人学习巩固记忆内容）
**定位属性：**position
1、static：默认值；没有定位； （可以用于取消元素之前的定位设置）
2、relative：相对定位 （参照物：自己所在的位置）
特点： 如果没有定位偏移量，对元素本身没有任何影响不使元素脱离文档流，空间是会被保留。不影响其他元素布局。 left、top、right、bottom是相对于当前元素自身进行偏移的 ，不能独自存在，必须配合定位元素一起使用 。
3、 absolute : 绝对定位 （参照物：包含块—该元素的祖先级元素）
使元素完全脱离文档流、使内联元素支持宽高 （让内联具备块特性）、使块元素默认宽根据内容决定（让块具备内联的特性）。
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。默认情况下是相对可视窗口进行定位的。包含块的概念：包含块绝对定位的基础；
绝对定位元素会根据包含块进行绝对定位，默认情况下 ，浏览器的可视窗口是一个大的包含块，默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义了包含块，那他就最近的祖先级元素进行绝对定位。给祖先级元素添加position：relative/absolute/fixed。
4、固定定位： fixed （参照物：始终都是 相对于整个浏览器窗口进行固定定位的） 使元素完全脱离文档流；使内联元素支持宽高 （让内联具备内联块特性）；使块元素默认宽根据内容决定（让块具备内联块的特性）；相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响不会受到祖先元素的影响。
5、 黏性定位: sticky 在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。
z-index : auto |number
检索或设置对象的层叠顺序。auto：默认值。number:无单位的整数值。可为负数。没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上。（注：他只针对于具有定位属性的元素起作用）
绝对定位和相对定位的区别：
1、相对定位的参照物是自己本身所在的位置，绝对定位的参照物的是包含块
2、相对定位是不会脱离文档流的，而且不会对页面的布局产生影响；绝对定位是会脱离文档流的，原来的位置就不在占有的，后面的内容会把位置补上去。
————————————————
宽高自适应简述
一、 相对窗口和父元素的自适应写法：
宽度：当块状元素不写宽度的时候，默认的宽度就是100%； 是父元素的宽度的100%；也就是始终跟父元素是同宽的。
width：100%；
默认情况下：如果给块元素加了绝对定位或者固定定位，他的宽度就不在是100%显示了。也不会跟父元素同宽的，而是跟里面的内容同宽，如果元素里面没有内容，有没有定义宽高，这个时候，元素就不见了
高度：当让元素的高度相对浏览器窗口显示半分比的值得时候，一定要给HTML和body设置高度100%；
高度自适应：1、相对窗口自适应 html,body{height:100%;} （全屏显示的页面必须要给 html,body设置高度100%）
注：百分比设置宽高的时候，都是相对当前元素最近的父元素显得的百分比的值(百分比这个值显示大小的参照物就是自己最近的父元素)
2、相对元素或者内容自适应：
第一种情况：
1）非浮动元素的父元素高度自适应
实现方法：1、不设置高度，或者高度设置成 ： height:auto；
2、通过最小高度实现高度自适应 ： min-height:300px;_height:300px;
3、给需要高度自适应的元素添加这些属性：min-height:value; height:auto !important;height:value;
注：带有!important；关键字过滤器的属性，要写到相同属性之前。
第二种情况：
2）浮动元素的父元素高度自适应
说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；
1、可以个固定高度去解决解决高度塌陷问题
弊端：但是不能让元素高度自适应了 。
2、overflow：hidden; 解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则）
弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；
3、在浮动元素的下方添加一个空元素，并且给他设置一下属性： 空标记：
clear:both;height:0;overflow:hidden;
弊端：会添加很多空标记，增加结构负担，产生代码冗余；
4、display:table; 给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；
弊端：会改变当前元素的元素类型；
5、万能清除法：:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 说明：推荐使用万能清除法；弊端：单词太多，不好记。
2020年3月1日（有待补充）