首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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 个人笔记

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180802G1ZLHL00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券