定位方式BFC

1 定位方式

普通流/文档流浮动定位

1.1 普通流/文档流

规则

元素按照其在HTML中的先后位置自上而下布局行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行所有元素默认都是普通流定位

1.2 浮动

规则

元素先按照普通流的位置出现，然后根据浮动的方向尽可能向左或向右偏移平移到容器边框，或者碰到另外一个浮动的元素父容器得不到脱离普通普通流的子元素的高度会将元素的display属性变更为block

浮动前的元素：

block:无影响
inline：浮动位于之前
inline-block：浮动位于之前

浮动后的元素：

block：覆盖，浮动在上
inline: 紧跟浮动元素
inline-block：紧跟浮动元素

重叠时

block：浮动在上，块内容环绕浮动元素
inline：浮动在下
inline-block：浮动在下

清除浮动

使用clear属性

//在父级后加一个空块
.clear {
  clear:both
}
//使用伪元素加空块
.parent::after {
  content: "";
  display: block;
  clear: both;
}

BFC

.parent {
  overflow:hidden;
}

上面主要针对父级高度塌陷
可以对浮动周边元素添加clear属性，清除浮动带来的影响

1.3 定位

规则

元素会整体脱离普通流，不会对其兄弟元素造成影响

2 BFC

规则

属于普通流，可以视为一块渲染区域或者元素的一个属性 - 隔离的独立容器，不会影响其他元素浮动元素的高度也参与计算

2.1 触发BFC

根元素float： 不为 noneposition： absolute、fixeddisplay：inline-block、inline-table、inline-flex、inline-grid、flex、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、flow-rootoverflow：不为visible的块元素contain：layout、content、paint多列容器 column-count、column-width不为auto

2.2 作用

避免外边距重叠清除浮动阻止元素被浮动元素覆盖

避免外边距重叠

<div></div>
<div></div>

.item {
    width: 300px;
    height: 100px;
    margin: 100px;
    background-color: aquamarine;
}

两个元素外边距都是100px，上下间距应该是200px，结果为100px，上下边距发生了重叠，

<div>
    <div></div>
</div>
<div>
    <div></div>
</div>

.item {
    width: 300px;
    height: 100px;
    margin: 100px;
    background-color: aquamarine;
}
.container {
    overflow: hidden;
}

在两个元素分别包上一个container，触发BFC，BFC上下不会发生边距重合

清除浮动
上面已经介绍，解决父级高度塌陷的问题

阻止浮动元素覆盖
前面介绍了，浮动元素后面的块级元素会被浮动元素覆盖
可以让这个块级元素触发BFC，添加overflow：hidden

<div></div>
<div></div>

.item1 {
    width: 100px;
    height: 100px;
    float: left;
    background-color: aquamarine;
}
.item2 {
    width: 300px;
    height: 300px;
    background-color: #dede;
}

.item2 {
    width: 300px;
    height: 300px;
    background-color: #dede;
    overflow: hidden;
}