BFC四步走!!
第一步:什么是BFC(Block Formatting Context)?
BFC 翻译为 ‘块级格式化上下文’;它可以触发一个独立的容器,这个容器里面的布局和其他容器的布局或是容器外的布局互不影响,也可以理解为BFC的容器有自己的作用范围;
第二步:BFC的规则是什么?
1.内部的盒子会在垂直方向上一个接一个的放置
2.垂直方向的距离由margin决定(同一个BFC作用范围内的俩个相邻的盒子的margin会发生重叠,与方向无关)
3.每个元素的左边都会与父元素的左边相接触,包括浮动元素;
4.BFC的区域不会与浮动元素的区域重叠
5.计算BFC的高度时,浮动元素也参与计算
6.BFC是一个独立的容器,不会与容器外面相互影响;
第三步:怎么触发BFC?
1.overflow 的属性不是visible;(hidden,scroll,auto,inherit都会触发);
2.float的属性不是none;(right,left,inherit都会触发);
3.position的属性不是static和relative;(absolute,fixed,inherit都会触发);
4.display的值为table-cell, table-caption, inline-block中的任何一个;
第四步:BFC有什么作用?
1.不和浮动元素重叠
俩个元素,一个浮动,一个不浮动,这个时候就会产生浮动元素覆盖不浮动元素的现象;这个时候给不浮动元素设置第三步里面的属性,使不浮动元素触发BFC;那么依据第二步里面的‘BFC的区域不会与浮动元素的区域重叠’,可以做成自适应俩栏布局;(给浮动元素一个固定的宽,触发BFC元素宽度未知,这个时候就是左边固定,右边自适应)
2.清除浮动
当子元素浮动时,父元素捕获不到子元素的高度,导致父元素高度无法被撑开;这就是高度塌陷;避免此类现发生,得清除浮动;
根据第二步的第五条‘BFC计算高度的时候,浮动元素也得计算在内’,可以给父元素设置第三步里面的属性,使父元素触发BFC,这时,就不会有高度塌陷问题;
注意:虽然可以解决问题,但清除浮动还是建议使用伪类元素;
3.解决margin边距重叠问题
上下俩个盒子都设置了margin:10px;本来打算看到的效果是俩个盒子相距20px;但实际上,俩个盒子的距离是10px;为什么不是20px呢?因为发生了外边距重叠问题;注意:这不是bug;
要解决这个问题,我们来看第二步里面的第二条:‘垂直方向的距离由margin决定(同一个BFC作用范围内的俩个相邻的盒子的margin会发生重叠,与方向无关)’;所以,让俩个盒子不在同一个BFC作用范围内就可以了;那么可以给其中一个元素的父级设置第三步里面的属性,使这个元素父级触发BFC,这时,就不会有边距重叠问题了;