CSS之BFC

BFC或许很多人都没听过这个名词,不过我们在写样式的时候一直在使用BFC的概念。BFC的解释是:块格式化上下文(Block Formatting Context)。简单说就是一个块级的盒子。

BFC有一些规则

内部的Box会在垂直方向上一个接一个的放置。

垂直方向上的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。

bfc的区域不会与float的元素区域重叠。

计算bfc的高度时,浮动元素也参与计算。

bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。

我们经常碰到一个问题,就是一个div里面的第一个元素写了margin-top,父元素跟着往下移动了,子元素还是贴着父元素的顶部,这是因为一个盒子不是BFC的情况下,上边距会和其内部文档流中的第一个子元素的上边距重叠,我们一般的做法是加上overfl:hidden,这其实是做了一个BFC。

我们都知道浮动会造成高度塌陷,我们也有很多方法清除浮动,但仔细想想,清除浮动的方法,也都是制造一个BFC,防止浮动造成的高度塌陷问题。

我们写一个多列布局的时候,宽度设置的是33.3333%,我们都以为会在一排,但是结果往往是最后一个被顶到了下一行,因为浏览器可能四舍五入了单位。如果你用的是inline-block,你可以换成float,你会发现他们都排在了一列。

还有一个块里面浮动一张图片,然后文字很多的时候会环绕这张图片,如果我们希望文字在右,图片在左,这时候给这些文字包含在一个BFC里面就能实现。

BFC会创建一个盒子,里面的元素不会超出这个盒子。常用的BFC方法有overflow不为visible、float不为none、position不为static和relative、display、flex布局等等。

BEC的我们可能不知道,但是我们一直在用,我讲的也不是很清楚,这边只是希望提出这个概念,然后可以去查资料更好的理解。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-02

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端左滑右滑组件

    最近有个需求,移动端有导航,需要左滑右滑的时候就能切换导航,跟轮播一样的效果,但是轮播内容少,而且是一次性加载数据。而需求是很多类型,每个类型有非常多的列表,如...

    wade
  • 对权限管理的一些理解

    后台系统几乎都会涉及权限管理,实现的方式有蛮多的,只是前端只能做样子货,最终的权限管理还是得后台做。今天说说自己认知的权限管理的几个方式。

    wade
  • 灰度发布

    灰度发布,对于大厂来说是必不可少的,对于我这种从来没有灰度发布过的,并不是很清楚,估计也有很多人不知道这个东西。以前只是直到灰度发布,这次稍微了解一下。

    wade
  • 如何使用CDSW在CDH集群通过sparklyr提交R的Spark作业

    继上一章介绍如何使用R连接Hive与Impala后,Fayson接下来讲讲如何在CDH集群中提交R的Spark作业,Spark自带了R语言的支持,在此就不做介绍...

    Fayson
  • cordova实现热更新

    二:安装npm cordova-hot-code-push-cli 用于生成项目文件的md5码进行比对版本升级

    仙士可
  • JAXB应用实例

    过往的项目中数据存储都离不开数据库,不过最近做的一个项目的某些数据(比如人员信息、菜单、权限等等)却完全没有涉及任何数据库操作,直接XML搞定。这里无意比较优...

    用户1615728
  • Go语言·我的性能我做主

    对于一些服务来说,性能是极其重要的一环,事关系统的吞吐、访问的延迟,进而影响用户的体验。 写性能测试在Go语言中是很便捷的,go自带的标准工具链就有完善的支持,...

    李海彬
  • 开发环境备忘清单

    槽痞
  • Go语言·我的性能我做主

    写性能测试在Go语言中是很便捷的,go自带的标准工具链就有完善的支持,下面我们来从Go的内部和系统调用方面来详细剖析一下Benchmark这块儿。

    李海彬
  • 一批美国名校被曝监控学生:14秒记录一次手机位置,想翘课更难了

    在美国雪城大学的课堂上,当学生走进特定的课程教室后,手机就会和教室的蓝牙相连,完成打卡。

    量子位

扫码关注云+社区

领取腾讯云代金券