理解BFC
BFC:块格式化上下文(Block Formatting Context)
是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品
(如果一个元素符合触发 BFC 的条件,则 BFC 中的元素布局不受外部影响)
哪些条件会形成BFC?
1、浮动元素 float:left | right | inherit(none除外)
2、position:absolute 或 fixed 定位
3、display:inline-block | inline-flex | table-cell
4、overflow:hidden | auto | scroll (visible除外)
BFC的特性:
1、bfc 是一个独立的容器,容器内子元素不会影响容器外的元素
2、bfc的区域不会与float的元素区域重叠
3、计算bfc的高度时,浮动元素也参与计算
4、垂直方向上的距离由margin决定
5、内部的Box会在垂直方向上一个接一个的放置
栗子:
bfc的区域不会与float的元素区域重叠,使用overflow:hidden解决
<div class="column1"></div>
<div class="column2"></div>
.column1{
width:200px;
height:200px;
margin-right:12px;
background:orangered;
float:left;
}
.column2{
width:100%;
height:200px;
background:yellow;
/* overflow:hidden;/*实现BFC*/
}
使用overflow:hidden前和使用后
使用后
外边距重叠
<div class="outside">
<div class="box1"></div>
<div class="box2"></div>
</div>
.outside{
width: 100px;
height: 100px;
background: deeppink;
}
.box1{
height:30px;
margin:10px 0;
background:orange;
}
.box2{
height:30px;
margin:30px 0;
background:orange;
}
由于垂直外边距会折叠,因此两个box盒子的垂直距离为30px而不是40px。
解决方法,把其中一个box放在另一个BFC容器里面
<div class="outside">
<div class="box1"></div>
<div class="content">
<div class="box2"></div>
</div>
</div>
.content{
overflow:hidden;
}
内部的Box会在垂直方向上一个接一个的放置
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
.container{
/*position:absolute;/*实现BFC*/
height:auto;
background:gray;
}
.item{
height:30px;
}
.item1{
width:200px;
background:deepskyblue;
}
.item2{
width:100px;
background:yellow;
float:left;
}
.item3{
width:300px;
background:pink;
}
.item4{
width:400px;
background:brown;
}
内部的Box会在垂直方向上一个接一个的放置,浮动的元素也是这样,box3浮动,他依然接着上一个盒子垂直排列。并且所有的盒子都左对齐
理解BFC的更多相关文章
- 全面理解BFC
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- 深入理解BFC和Margin Collapse
深入理解BFC和Margin Collapse BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威 ...
- 理解 BFC
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章, 介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等). 虽然我知道如何利用 BFC 解决这些问 ...
- 10分钟理解BFC原理
10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...
- 10 分钟理解 BFC 原理
一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至 ...
- 深入理解BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- 深入理解BFC
定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...
- 深入理解BFC和外边距合并(Margin Collapse)
一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
随机推荐
- 在 CentOS 上编写 init.d service script [转]
背景:之前编写了一些脚本,下载了一些开源软件,想把它们做成系统服务,通过 service your_prog_name start 这样的方式来后台运行,并在开机时自动启动.在了解了 daemon 命 ...
- python3 fileinput模块
模块fileinput可以对一个或多个文件的内容所有行进行迭代.遍历等操作: 常用方法: fileinput.input(files=None, inplace=False, backup='', b ...
- [luogu2051][bzoj1801][AHOI2009]chess中国象棋【动态规划】
题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...
- 使用rt-thread中BSP-stm32 ENV构建工具报错
@2019-01-23 [小记] --路径问题 参照rtt官方<STM32 系列 BSP 制作教程> 构建项目时出现如下错误 error1:打开 menuconfig 出错 解决方法: 根 ...
- 工作机制.py
rpc_server.py# !/usr/bin/env python3.5# -*- coding:utf-8 -*-# __author__ == 'LuoTianShuai'"&quo ...
- luogu3278/bzoj3323 多项式的运算 (splay)
mulx的操作,其实就是给r+1的系数+=r的系数,然后删掉r,把l~r-1向右移一位,再插一个0到原来的位置 splay维护区间加和区间乘就好了 (一定要注意做事的顺序,一件事都做完了再去做别的,否 ...
- PHP基础学习----字符串操作
1.单引号和双引号的区别 在php中,字符串的定义可以使用英文单引号'',也可以使用英文双引号“”: <?php $str = 'hello'; echo "str is $str&q ...
- Django(二十)model中的 class Meta
https://www.cnblogs.com/tongchengbin/p/7670927.html class Main(models.Model): img = models.CharField ...
- python3+django2 开发易语言网络验证(下)
第六步:网络验证服务器端项目上线部署 功夫不负有心人,终于部署成功啦! 前期准备: 项目名:netauth 系统:百度云服务器下的Ubuntu16.4 软件:xshell(无论如何想办法用这个跟服务器 ...
- 第二篇-ubuntu18.04下怎么制作GIF动画
一.在桌面打开终端 二.接着通过apt安装byzanz.sudo apt-get install byzanz 三.安装完成后在终端执行“xwininfo”.xwininfo 四.然后鼠标会变成“+” ...