• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
返回主页

ゆうしK

  • 博客园
  • 首页
  • 新随笔
  • 联系
  • 订阅
  • 管理

关于 BFC 的一些实践例子

对于,BFC 我还不太懂,不过还好可以先从这些例子开始
我在 codepen 上写的一些例子:

  • 新建 BFC 可以清除浮动
  • 要创建多少个 BFC 才可以把所有子元素彻底包裹住,而且 margin 不塌缩?(等于子元素的数量)
  • 阻止图文环绕(这里要用块级元素,例如:p)
  • 多列布局(如果在多列布局里面,数值上没错,却因为计算偏差导致了 float流 换行,可以给最后一列添加 BFC 坍缩水平 margin 来补救)

refs:

  • https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
  • https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
posted @ 2016-11-19 01:49  ゆうしK  阅读(195)  评论(0)    收藏  举报
刷新页面返回顶部

公告

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3