什么是BFC

BFC是什么并不重要。重要的是开启它干嘛?以及如何开启它

根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块级 格式化 环境)简称BFC

开启元素的BFC后,元素会有如下特性:

1.父元素的垂直外边距不会和子元素重叠。

2.开启BFC的元素不会被浮动的元素所覆盖。

3.开启BFC的元素可以包含浮动的子元素。

在以下情况下,会自动开启BFC:

1.设置元素浮动(此方法,虽然可以撑开父元素,但是会导致父元素的宽度丢失,也会导致下边的元素上移)

2.设置元素绝对定位

3.设置元素display:inline-block;(此方法虽然也可以解决问题,但是转为行内块也会导致宽度丢失,因此也不推荐此方法)

4.将元素的overflow设置为一个非visible的值(推荐方式:overflow:hidden;是副作用最小的开启BFC方式)

注:ie6不支持BFC,如果要同时兼容ie6  可以加一个属性 zoom:1;即可(zoom表示放大,写几就是放大几倍,此属性仅支持IE,且IE8以下)

html/css中BFC的开启、关闭、作用的更多相关文章

  1. 总结下对我对于CSS中BFC的认知

    首先第一个,什么是BFC? BFC的全称叫Block  Formatting  Context   (块级格式化上下文)BFC是css中隐含属性,开启BFC后元素会变成一个独立的布局环. 简单来说,它 ...

  2. 转:css中overflow:hidden 不起作用了吗?

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  3. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  4. 理解CSS中BFC

    BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-block ...

  5. CSS中:overflow:hidden的作用

    功能1.隐藏溢出  在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来. 要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐 ...

  6. css中bfc和ifc

    bfc定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置.Box垂直方向的距离由mar ...

  7. CSS中BFC规则

    何为BFC BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的B ...

  8. CSS中display:block属性的作用

    display:block可以理解为块,举个简单的例子!比如你做一个超链接,<li><a href="#">超链接</a></li> ...

  9. CSS中overflow:hidden

    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...

随机推荐

  1. 可决系数R^2和方差膨胀因子VIF

    然而很多时候,被筛选的特征在模型上线的预测效果并不理想,究其原因可能是由于特征筛选的偏差. 但还有一个显著的因素,就是选取特征之间之间可能存在高度的多重共线性,导致模型对测试集预测能力不佳. 为了在筛 ...

  2. 拓展KMP以及模板

    废话不多说,上模板 #include<bits/stdc++.h> ; int Next[maxn], extend[maxn], moL, strL;///Next数组.extend数组 ...

  3. Error:MySQLAdministrator无法连接到实例

    Q:利用MySQLAdministrator登录时显示could not connect to the specific instance,使用ping指令后可以ping通,如下所示: A:这里能够p ...

  4. [CSP-S模拟测试]:随(快速幂+数学)

    题目描述 给出$n$个正整数$a_1,a_2...a_n$和一个质数mod.一个变量$x$初始为$1$.进行$m$次操作.每次在$n$个数中随机选一个$a_i$,然后$x=x\times a_i$.问 ...

  5. 大数据笔记(十五)——Hive的体系结构与安装配置、数据模型

    一.常见的数据分析引擎 Hive:Hive是一个翻译器,一个基于Hadoop之上的数据仓库,把SQL语句翻译成一个  MapReduce程序.可以看成是Hive到MapReduce的映射器. Hive ...

  6. 阿里云配置通用服务的坑 ssh: connect to host 47.103.101.102 port 22: Connection refused

    1.~ wjw$ ssh root@47.103.101.102 ssh: connect to host 47.103.101.102 port 22: Connection refused ssh ...

  7. slider组件

    slider组件,是一个强大的滑动选择器组件: 属性: min:类型 数字 滑动选择器的(范围)最小值 max:类型 数字 滑动选择器的(范围)最大值 step:类型 数字 步长(滑一次走的距离)  ...

  8. Linux驱动开发7——I/O内存分配

    CPU通过物理地址访问DDR和外设,DDR内存称为物理内存地址空间,外设寄存器组称为I/O内存地址空间. ARM采用统一编址,而X86采用独立编制.上一章介绍了DDR内存分配,这一章介绍I/O内存分配 ...

  9. Linux内核调试方法总结之序言

    本系列主要介绍Linux内核死机.异常重启类稳定性问题的调试方法. 在Linux系统中,一切皆为文件,而系统运行的载体,是一类特殊的文件,即进程.因此,我尝试从进程的角度分析Linux内核的死机.异常 ...

  10. ORACLE内存管理之ASMM AMM

    ORACLE ASMM ORACLE AMM ASMM转换至AMM AMM转换至ASMM