专栏首页Web前端开发关于元素间的边距重叠问题与BFC

关于元素间的边距重叠问题与BFC

一、边距重叠常见情况

1、垂直方向上相邻元素的重叠

(水平方向上不会发生重叠)

2、 垂直方向上父子元素间的重叠

二、BFC

1、什么是 BFC

BFC(Block Formatting Context),即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素

2、创建 BFC 的方法

(1)设置 overflow 属性,除了 visible 以外的值(例如 hidden、auto)

(2)设置 float 属性,除了 none 以外的值(例如 left、right)

(3)设置 position 属性,除了static 和 relative 以外的值(例如 absolute、fixed)

(4)设置 display 属性,可以是 flex、inline-block、table-cell...

3、BFC 的使用场景

(1)解决元素间的边距重叠问题 -- 分别添加创建了 BFC 的父元素

<!-- 创建BFC前 -->
<body>
  <div></div>
  <div></div>
</body>

<!-- 创建BFC后 -->
<body>
  <section>
    <div></div>
  </section>
  <section>
    <div></div>
  </section>
</body>
/* 创建BFC前 */
div {
  width: 100px;
  height: 100px;
  background: #7b81ca;
  margin: 30px;
}

/* 创建BFC后 */
section {
  overflow: hidden;
}
div {
  width: 100px;
  height: 100px;
  background: #7b81ca;
  margin: 30px;
}

(2)解决浮动重叠问题 -- 为非浮动的元素创建 BFC

(常用于文字环绕图片的效果)

<body>
  <section></section>
  <div></div>
</body>
/* 创建BFC前 */
section {
  width: 100px;
  height: 200px;
  background: rgba(244, 220, 250, 0.8);
  float: left;
}
div {
  width: 200px;
  height: 100px;
  background: rgba(123, 129, 202, 0.8);
}

/* 创建BFC后 */
section {
  width: 100px;
  height: 200px;
  background: rgba(244, 220, 250, 0.8);
  float: left;
}
div {
  width: 200px;
  height: 100px;
  background: rgba(123, 129, 202, 0.8);
  overflow: hidden;
}

(3)清除浮动,解决浮动元素的父元素高度塌陷问题 -- 为父元素创建 BFC

<body>
  <section>
    <div></div>
  </section>
</body>
/* 创建BFC前 */
section {
  background: rgba(244, 220, 250, 1);
}
div {
  width: 100px;
  height: 100px;
  background: rgba(123, 129, 202, 1);
  float: left;
}

/* 创建BFC后 */
section {
  background: rgba(244, 220, 250, 1);
  overflow: hidden;
}
div {
  width: 100px;
  height: 100px;
  background: rgba(123, 129, 202, 1);
  float: left;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JPG、PNG、SVG 和 WEBP 格式图片的业务场景对比

    Leophen
  • 页面置换算法详解

    进程运行时,若其访问的页面不在内存而需将其调入,但内存已无空闲空间时,就需要从内存中调出一页程序或数据,送入磁盘的对换区,其中选择调出页面的算法就称为页面置换算...

    Leophen
  • 关于DOM事件流、DOM0级事件与DOM2级事件

    DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window

    Leophen
  • 1060 爱丁顿数 (25 分)

    英国天文学家爱丁顿很喜欢骑车。据说他为了炫耀自己的骑车功力,还定义了一个“爱丁顿数” E ,即满足有 E 天骑车超过 E 英里的最大整数 E。据说爱丁顿自己的 ...

    可爱见见
  • Flutter环境搭建

    这几年,移动跨平台的趋势可以说是越来越明显,技术实现上也是百花争艳,不过究其实现,无外乎有那么几种。 Web 流:也被称为 Hybrid 技术,它基于 Web ...

    xiangzhihong
  • CSS3 3D旋转立方体 原

    主要用到动画css3  animation,特别注意当完成正方体的过程中,每个面旋转时这个面的坐标系是跟着变换的,只是他们的相对位置不变,默认的变换基点是(50...

    tianyawhl
  • html+css学习笔记017-H5新背景属性0颜色0倒影0遮罩

    Mr. 柳上原
  • 首个小程序权威奖项诞生!每周评选一款最好的小程序

    知晓君
  • jmeter性能测试抓包和正则表达式提取器

    顾翔老师开发的bugreport2script开源了,希望大家多提建议。文件在https://github.com/xianggu625/bug2testscr...

    小老鼠
  • 3d魔方动画

    河湾欢儿

扫码关注云+社区

领取腾讯云代金券