BFC规范

BFC规范是什么?

BFC规范也叫块级格式化上下文。是指一个独立的容器。

如何触发BFC?

我们可以通过一下几种方式触发BFC

1.通过浮动触发:float(除none)

2.通过绝对\固定定位触发:position:absolute\flxed

3.通过display触发:display:inline-block\flex\table-cells

4.通过overflow触发:overflow:hidden\auto\scroll

什么时候需要触发BFC?

1、上下块级元素的margin相叠加的时候。

style:
.box1{
width: 300px;
height: 200px;
background: red;
margin:20px 0;
}
.box2{
width: 300px;
height: 200px;
background: blue;
margin:50px 0;
}
.box{
overflow: hidden;
} html:
<div class="box">
<div class="box1"></div>
</div>
<div class="box">
<div class="box2"></div>
</div>

2、解决margin传递问题

style:
.box1{
background: red;
border:1px solid #ccc;
overflow: hidden;
}
.box2{
width: 300px;
height: 100px;
background: blue;
margin-top:50px;
float: left;
} html:
<div class="box1">
<div class="box2"></div>
</div>

3.解决浮动问题

style:
.box1{
background: red;
border:1px solid #ccc;
overflow: hidden;
}
.box2{
width: 300px;
height: 100px;
background: blue;
float: left;
} html:
<div class="box1">
<div class="box2"></div>
</div>

4、解决覆盖问题

style:
.box1{
background: red;
width: 300px;
height: 100px;
border:1px solid #ccc;
float: left;
}
.box2{
overflow: hidden;
height: 300px;
background: blue;
} html:
<div class="box1"></div>
<div class="box2">154545</div>

可以实现左边固定,右边自适应的两栏布局。

BFC规范的更多相关文章

  1. 5月23日——谈谈对BFC规范的理解

    一.什么是BFC? BFC(block  formatting context):简单来说它就是一种属性,这种属性会影响元素与元素之间的位置.间距 二.形成BFC的条件 1.float:给元素添加浮动 ...

  2. 对BFC规范的理解

    什么是BFC? BFC 全称为 块级格式化上下文(Block Fromatting Context),是Web页面的可视化CSS渲染出的一部分.它是块级盒布局出现的区域,也是浮动层元素进行交互的区域. ...

  3. 关于浮动&关于BFC规范&whyoverflow清除浮动

    https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...

  4. 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  5. 浅谈BFC和IFC

    先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...

  6. 浅析CSS里的 BFC 和 IFC

    前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白 ...

  7. 浏览器的差距、ie6 ie7 ie8、符号、html css、BFC、

    1.浏览器的差距 浏览器默认的字体是16px,谷歌的最小字体是12px,其他是10px 2.ie6.ie7.ie8. hack:就是针对不同的浏览器去不同的html,css样式,从而让各个浏览器能达到 ...

  8. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  9. 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC

    前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...

随机推荐

  1. 前端 -- BOM和DOM

    一,引入 到目前为止,已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  2. Python3入门基础--str常用方法

    Python基础之String常用方法 str():将其他类型的变量转换为str类型,例如: name = 'Jack' age = 22 course = ['web','Java','mysql' ...

  3. jsp大学课程hi实验:分页在线测评(session的使用)

    project_1_updata_1_1.jsp <%@ page contentType="text/html;charset=utf-8" language=" ...

  4. 用牛顿-拉弗森法定义平方根函数(Newton-Raphson method Square Root Python)

    牛顿法(Newton’s method)又称为牛顿-拉弗森法(Newton-Raphson method),是一种近似求解实数方程式的方法.(注:Joseph Raphson在1690年出版的< ...

  5. 【HDU - 4927】Series 1

    BUPT2017 wintertraining(15) #5I 题意 输出序列A[1..n]的第n-1阶差分(一个整数). 题解 观察可知答案就是 \[ \sum_{i=0}^{n-1} {(-1)^ ...

  6. 自学华为IoT物联网之路

    自学华为IoT物联网之路 01 自学华为IoT物联网_01 物联网概述 02 自学华为IoT物联网_02 常见物联网通信技术 03 自学华为IoT物联网_03 公共事业物联网常见问题及解决方案 04  ...

  7. 【dfs】p1025 数的划分

    P1025 数的划分 题目描述 将整数n分成k份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1; 问有 ...

  8. [NOI2010]海拔(最小割)

    题目描述 YT市是一个规划良好的城市,城市被东西向和南北向的主干道划分为n×n个区域.简单起见,可以将YT市看作一个 正方形,每一个区域也可看作一个正方形.从而,YT城市中包括(n+1)×(n+1)个 ...

  9. Python3 与 C# 基础语法对比(String专栏)

      Code:https://github.com/lotapp/BaseCode 多图旧排版:https://www.cnblogs.com/dunitian/p/9119986.html 在线编程 ...

  10. Kafka学习之路

    一直在思考写一些什么东西作为2017年开篇博客.突然看到一篇<Kafka学习之路>的博文,觉得十分应景,于是决定搬来这“他山之石”.虽然对于Kafka博客我一向坚持原创,不过这篇来自Con ...