标签：总结 绝对定位 其他 文档流 解决 相对 地方 top abs
一. 布局流
众所周知，html文档大致分为三种控制元素布局方式
1.普通布局
普通布局，顾名思义，就是元素按照HTML先后顺序进行上下布局。
当然这其中又分为块类元素、行内快元素和行内元素，其中这三种具体有那些标签就不在这里一一赘述。
块类元素单独占一行。
行内元素可水平排列，直到宽度占满父元素宽度另起一行重新排列。
除非另外指令，否则所有的元素都默认为普通定位，也可以理解为普通流的元素位置是由HTML文档位置决定的
2.浮动（float）
在浮动元素中，元素根据浮动的方向依次横向排列，如果宽度大于父元素宽度，曾另起一行
3.定位 （position）
在添加绝对定位的元素中，该元素会完全脱离文档流，不会对兄弟元素有影响，该元素的位置会由其父元素相对定位的位置和其坐标决定
二. BFC的定义
bfc的概念是块级格式上下文，属于页面中单独的一块区域，有其自己的规则。决定其内子元素的定位和其他元素关系的相互作用。
具有BFC特性的元素可以看成单独隔离了容器，容器里面的元素不会在布局影响外面的元素，里面的元素也不会影响外面的元素，而且bfc还有其自己的一些特性。
归根意义来讲，bfc还是属于文档类型中的普通流。也可以把他比做成一个大箱子，里免得元素在折腾都不会影响外面的元素。
三.触发BFC
只要元素满足任意一种，即可触发BFC
* body 就是一个BFC
*浮动的元素，除 float： none；
*脱离文档流的定位元素：position： absolute / fixed
*overflow： hidden；
四.BFC的特性和作用
1.解决父元素没有高度，子元素浮动造成父元素高度塌陷问题
.clear_fix {
content: “”；
display: block;
clear: both;
height: 0;
visitibility: hidden;
overflow: hidden ; (触发BFC)
}
2. 同一BFC两盒子 margin-bottom 与 margin—top 重叠
原因： 两个盒子都处于一个BFC中 （body），在同一BFC中边距与边距之间会发生重叠。
解决办法： 给其中一个盒子加一个div,css样式添加 overflow: hidden; ( 触发BFC），相当于两个元素在两个大盒子里，盒子与盒子之间的间距就不会重叠。
3. 其中百分比布局常用BFC的特性。
这就是我一些对于BFC的总结，如有出入地方希望多多交流~
标签：总结 绝对定位 其他 文档流 解决 相对 地方 top abs
原文地址：https://www.cnblogs.com/yizhiluo/p/12635178.html
