BFC能解决的问题

小兮兮
217 阅读4分钟

防止子元素浮动之后的父元素高度坍塌

问题

父元素的高度是由内部未浮动的子元素高度撑起的。 如果子元素浮动了，就不占用普通文档流的位置。父元素高度就会失去支撑，也称为高度坍塌

方案1父元素overflow:hidden

原理

css中的overflow：hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的margin范围

缺点

并不是所有的超出显示范围之外的子元素都要隐藏的，有些却是要正常显示的。例如：常见的鼠标悬停之后显示二级导航菜单。

方案2 补充空的子元素

在父元素内的结尾追加一个空子元素（块级的），并设置空子元素清除浮动影响(clear: both)

原理

利用clear:both属性 和 父元素必须包含非浮动元素 这两个原理

方案3 设置父元素也浮动

原理

浮动属性也会强制父元素扩大到包含所有浮动的内部元素

方案4 为父元素添加末尾伪元素设置clear:both

父元素::after {
    content:"";
    clear:both;
    display:block;
    height:0
}
复制代码

BFC

BFC，Block formatting context。直译为: “块级格式化上下文”。 它是网页中的一个独立的渲染区域，这个渲染区域只有块级元素才能参与，它规定了内部的块级元素如何布局。 BFC渲染区域内部如何布局，与区域外部无关，同时，外部元素也不影响BFC渲染区域内的元素。

简单来说，BFC就是页面上的一个隔离的独立渲染区域：

  • 区域里面的子元素不会影响到外面的元素
  • 外面的元素也不会影响到区域里面的子元素

css中有两种渲染区域：

块级元素渲染区域： 所有display为block, list-item, table的元素会生成块级元素渲染区域。 在块级元素渲染区域内部，以BFC方式渲染。从上到下，依次排列

行级元素渲染区域：所有display为inline, inline-block，inline-table的元素，会生成行级元素渲染区域。在其内部，以IFC(inline formatting context) 方式渲染。 从左到右，依次排列

BFC的布局规则

  • 从上到下，一行一个
  • 每个元素的高度要计算其margin
  • 属于同一个BFC的两个相邻的块元素在垂直方向上的margin会重叠/合并。但水平方向的margin不会。
  • 计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须算在内（解决浮动的问题）

产生BFC区域的4种情况

  1. float的值不是none
  2. position的值不是static或者relative
  3. display的值是：inline-block,table-cell, flex, table-caption或者inline-flex
  4. overflow的值不是visible

BFC能解决的问题

浮动导致的高度坍塌

如上介绍的

避免垂直方向margin合并

解决方式，有两步

  1. 用一个外围块元素包裹下方元素
  2. 设置外层元素overflow:hidden

原理： 补充的这个外层元素，会变成一个BFC方式渲染区域，就必须包裹内部子元素及子元素的margin。而且，内部元素不能超出范围影响外部，外部元素也不能进入BFC范围内，影响内部。

上面的 第二步的overflow为hidden可能影响父元素中部分自由定位的子元素。 解决： 给补充的外层元素添加::before {content:'', display: table}

原理： display:table，在子元素之前形成平级的bfc渲染区域。不允许子元素的margin进入::before范围内，它的优点是：既不会隐藏内容，又不会添加新元素，又不会影响高度。

避免垂直方向上的margin溢出

问题描述

子元素的margin-top，会超出父元素上边的范围，变成父元素的margin-top。 而实际上，子元素与父元素之间，依然是没有margin-top的效果的。

解决方法有5种：

  1. 设置父元素的overflow:hidden。 原理是，父元素变成了BFC区域，就必须包裹内层子元素的margin。缺点是：它真的隐藏元素
  2. 为父元素添加上边框（1px）, 颜色设置为透明。原理：这里没有BFC，而是边框本身可以阻隔margin溢出。缺点：1px会增大元素的尺寸。
  3. 用父元素的pading-top代替。原理：这里不是BFC，而是因为padding本身可以阻隔margin溢出。缺点：padding会增加尺寸。可以设置box-sizing 为border-box
  4. 在父元素内 第一个子元素之前添加一个空的table。 原理：table元素就是BFC渲染区域，其他的元素不会进入这个区域
  5. 用父元素:: before{content:''; display: table }。 原理同上，优点是既不隐藏内容，又不添加新元素，又不影响高度。 最好的方式就是它了。

解决 左边定宽，右边自适应布局

方案： 左边：width +float:left 右边：overflow:hidden


作者：凡人进阶
链接：juejin.cn/post/708276…

avatar
文章
阅读
粉丝