当前位置: 首页 / 技术分享 / 正文
好程序员web前端培训分享HTML CSS学习笔记BFC

2020-07-01

web前端培训 HTML

  好程序员web前端培训分享HTML CSS学习笔记BFC,BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

web前端三要素

BFC的布局规则

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

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)

三、每个元素的margin box的左边, 与包含块border box的左边相接触

四、BFC的区域不会与float box重叠。

五、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

六、计算BFC的高度时,浮动元素也参与计算

哪些元素或属性能触发BFC

根元素(html)

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

BFC的应用

1、自适应两栏布局

2、清除内部浮动

3、防止margin上下重叠

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2020-02-17(北京)

    开班盛况

    开班时间:2020-03-02(深圳)

    开班盛况
  • 大数据+人工智能 <好程序员严选班>

    开班时间:2019-12-23(北京)

    开班盛况
  • 大数据+人工智能 <好程序员班>

    开班时间:2020-02-24(杭州)

    开班盛况

    开班时间:2020-02-17(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2020-03-09(北京)

    开班盛况
  • Python全栈+人工智能 <高端班>

    开班时间:2019-07-22(北京)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2020-02-24(北京)

    开班盛况
在线咨询
免费试听
入学教程
立即报名

Copyright 2011-2020 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公安网11010802011455号