BFC规范
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规范的更多相关文章
- 5月23日——谈谈对BFC规范的理解
一.什么是BFC? BFC(block formatting context):简单来说它就是一种属性,这种属性会影响元素与元素之间的位置.间距 二.形成BFC的条件 1.float:给元素添加浮动 ...
- 对BFC规范的理解
什么是BFC? BFC 全称为 块级格式化上下文(Block Fromatting Context),是Web页面的可视化CSS渲染出的一部分.它是块级盒布局出现的区域,也是浮动层元素进行交互的区域. ...
- 关于浮动&关于BFC规范&whyoverflow清除浮动
https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- 浅谈BFC和IFC
先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...
- 浅析CSS里的 BFC 和 IFC
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到: 前端必备图书<Web安全开发指南 掌握白 ...
- 浏览器的差距、ie6 ie7 ie8、符号、html css、BFC、
1.浏览器的差距 浏览器默认的字体是16px,谷歌的最小字体是12px,其他是10px 2.ie6.ie7.ie8. hack:就是针对不同的浏览器去不同的html,css样式,从而让各个浏览器能达到 ...
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC
前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...
随机推荐
- 前端 -- BOM和DOM
一,引入 到目前为止,已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- Python3入门基础--str常用方法
Python基础之String常用方法 str():将其他类型的变量转换为str类型,例如: name = 'Jack' age = 22 course = ['web','Java','mysql' ...
- jsp大学课程hi实验:分页在线测评(session的使用)
project_1_updata_1_1.jsp <%@ page contentType="text/html;charset=utf-8" language=" ...
- 用牛顿-拉弗森法定义平方根函数(Newton-Raphson method Square Root Python)
牛顿法(Newton’s method)又称为牛顿-拉弗森法(Newton-Raphson method),是一种近似求解实数方程式的方法.(注:Joseph Raphson在1690年出版的< ...
- 【HDU - 4927】Series 1
BUPT2017 wintertraining(15) #5I 题意 输出序列A[1..n]的第n-1阶差分(一个整数). 题解 观察可知答案就是 \[ \sum_{i=0}^{n-1} {(-1)^ ...
- 自学华为IoT物联网之路
自学华为IoT物联网之路 01 自学华为IoT物联网_01 物联网概述 02 自学华为IoT物联网_02 常见物联网通信技术 03 自学华为IoT物联网_03 公共事业物联网常见问题及解决方案 04 ...
- 【dfs】p1025 数的划分
P1025 数的划分 题目描述 将整数n分成k份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1; 问有 ...
- [NOI2010]海拔(最小割)
题目描述 YT市是一个规划良好的城市,城市被东西向和南北向的主干道划分为n×n个区域.简单起见,可以将YT市看作一个 正方形,每一个区域也可看作一个正方形.从而,YT城市中包括(n+1)×(n+1)个 ...
- Python3 与 C# 基础语法对比(String专栏)
Code:https://github.com/lotapp/BaseCode 多图旧排版:https://www.cnblogs.com/dunitian/p/9119986.html 在线编程 ...
- Kafka学习之路
一直在思考写一些什么东西作为2017年开篇博客.突然看到一篇<Kafka学习之路>的博文,觉得十分应景,于是决定搬来这“他山之石”.虽然对于Kafka博客我一向坚持原创,不过这篇来自Con ...