CSS --- BFC 讲解

带刺的小嗨瓜
210 阅读4分钟

防止高度塌陷的 4 种方法

  • 子元素浮动，还会对父元素造成影响。
  • 如果子元素浮动起来，就不占用普通文档流的位置，父元素的高度就会始去支撑，也称为高度塌陷 1.方法一：为父元素设置 overflow:hidden 属性；
  • 原理：css 中的 overflow:hidden 属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的 margin 范围
  • 缺点:如果子元素的内容想展示出来，不想隐藏，就会发生冲突，不能和position定位配合使用，超出的尺寸会被隐藏 方法二：在父元素内的结尾追加一个空的子元素（块级元素），并设置空子元素清除浮动影响（clear:both）
  • 原理：利用 ceear:both 属性和父元素必须包含非浮动的元素两个原理
  • 缺点：无端多出一个无意义的看不见的空元素，影响选择器和查找元素- 方法三：设置父元素也浮动
  • 原理：浮动属性也会强制父元素扩大到包含所有浮动的内部元素
  • 缺点：会产生新的浮动影响，比如，父元素浮动了，导致父元素之后的平级元素div上移，被父元素挡住了
  • 解决：设置父元素之后的平级元素清除浮动（clear:both）
  • 给父元素设置浮动与给父元素设置 overflow:hidden,效果是一样的，强制父元素必须包含内部浮动的子元素的要求 方法四：为父元素末尾伪元素设置clear:both 完美解决方案
  • 优点：既不会影响显示隐藏，又不会影响查找元素，又不会产生新的浮动问题 父元素::after{content:'',display:table;clear:both} 或 {content:'',display:block;height:0;clear:both}
  • 问题：个别浏览器，display:table,可能带默认高度，保险起见，再加一个属性height:0px 上述会发现 为什么overflow:hidden;和 父元素设置 float，会强制父元素包裹浮动的子元素？

BFC 的定义

首先 BFC 这个词语的英文的全称为 block formmating context。直译为”块级格式化上下文”。它是一个独立的渲染区域，只有块级元素参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。

BFC布局规则

  • 内部的 div 会在垂直方向，一个接一个的防止
  • div 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻的 div margin 会发生重叠
  • 计算父元素 BFC 渲染区域的高度时，内部浮动元素的高度，都必须算再内
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

4种情况会形成 BFC 渲染区域

  • float 的值不是 none
  • position 的值不是 static 或者 relative
  • display 的值是 inline-block table-cell,flex,table-caption 或者inline-flex
  • overflow的值不是 visible

BFC 都解决过什么问题

1. 解决垂直 两个 div margin 重叠问题

  • 5种办法解决
  1. Step1：添加父元素包裹下方元素
  2. Step2：
  • 父元素添加 overflow:hodden
  • 父元素下第一个子元素前添加空
  • 父元素padding代替子元素margin
  • 父元素 + 透明上边框 （transparent）
  • 父元素::before{comtent:'',display:table}
  • 最优解决办法：父元素::before{content:'',display:table}
  • 原理：display:table,在子元素形式平级的bfc渲染区域。不允许子元素的margin进入::before范围内。
  • 优点：既不隐藏内容，又不添加新元素，又不影响高度。
<div class="father">
    <div style="margin-top: 20px;width: 400px;height: 100px;background:pink;"></div>
</div>
<style>
.father::before{
    content: '';
    display: table;
    clear: both
}
</style>

2.解决垂直方向上的margin溢出

  • 问题：子元素的设置margin-top,会超出父元素的上边的范围，变成父元素的margin-top，实际上，子元素与父元素之前依然是没有margin-top的，效果不是想要的。
<div style="width: 100px;height: 100px;background: pink">
    <div style="width: 50px;height: 50px;background: #0f9df7;margin-top: 80px"></div>
</div>
  • 5种解决margin溢出的方法
  1. 设置父元素 overflow:hidden
  2. 为父元素添加上边框，颜色设置为透明 （transparent）
  • 原理：这里不是bfc,而是因为边框可以阻隔margin移除，
  • 缺点:边框会增大父元素的实际大小，导致布局错乱
  1. 用父元素的padding-top 代替子元素的margin-top ,但是这种方法会改变父元素的大小。
  2. 在父元素内的第一个元素之前添加一个空的
    因为display:table,
    他的display属性，就是table,形成BFC,优点：空table元素没有大小，不占用父元素控件。
  3. 最优:父元素::before{content:'',display:table} 3.左定宽，右自适应 布局
  • 左边float:left
  • 右边 overflow:hidden 原理：右侧形成BFC,不会影响左侧
avatar
文章
阅读
粉丝