清除浮动的几种方式,及原理?

07-10164阅读0评论

温馨提示:

文章最后更新时间2021年07月10日,若内容或图片失效,请留言反馈!

清除浮动简单,但这题要引出的是BFC,BFC也是必考的基础知识点
  • ::after / <br> / clear: both

  • 创建父级 BFC(overflow:hidden)

  • 父级设置高度

BFC (块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

触发条件:

  • 根元素

  • position: absolute/fixed

  • display: inline-block / table

  • float 元素

  • ovevflow !== visible

规则:

  • 属于同一个 BFC 的两个相邻 Box 垂直排列

  • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

  • BFC 的区域不会与 float 的元素区域重叠

  • 计算 BFC 的高度时,浮动子元素也参与计算

  • 文字层不会被浮动层覆盖,环绕于周围

文章版权声明:除非注明,否则均为阿灿博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论取消回复

表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,164人围观)

还没有评论,来说两句吧...

取消
支付宝二维码
支付宝二维码
微信二维码