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

2020-07-01

北京WEB前端培训 HTML

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

HTML5大前端

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-11-16(北京)

    预约报名

    开班时间:2020-12-07(深圳)

    预约报名
  • 大数据+人工智能 <高端班>

    开班时间:2020-11-16(深圳)

    预约报名

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

    预约报名
  • JavaEE分布式开发 <高端班>

    开班时间:2020-12-07(北京)

    预约报名

    开班时间:2020-07-20(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2020-07-20(上海)

    开班盛况

    开班时间:2020-09-21(上海)

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

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

    开班盛况

    开班时间:2019-07-15(深圳)

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

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