1、BFC的区域会与float的元素区域重叠

2、计算BFC的高度时,浮动子元素也参与计算

3、BFC就是页面上的一个隔离的独立容器,容器里面的子元素是不会影响到外面的元素

4、BFC意为”块级格式化上下文”
   答案:1
   解析:
     BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。
     BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。所以,避免margin穿透啊,清除浮动什么的也好理解了。

什么时候会触发BFC呢?
常见的如下: float的值不为none。 overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

css布局中的BFC的更多相关文章

  1. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  2. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  3. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  4. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  5. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  6. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  7. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

  8. CSS布局中——导航是非常常见的

    导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type=" ...

  9. CSS布局中一个简单的应用BFC的例子

    什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...

随机推荐

  1. 回炉重造系列-C# func and action委托是什么?

    如题: C# func and action委托是什么? 1) 回答这个问题之前,我们需要了解什么是委托(英文 Delegate )? 为了便于理解,再往前推一步,回到c语言时代,指针的概念. 什么是 ...

  2. git冲突的表现

    <<<<<<< HEAD b789 ======= b45678910 >>>>>>> 6853e5ff961e68 ...

  3. Docker(Docker Toolbox)配置镜像加速更换国内源

    自己当时装的是Win10专业工作室版本,不知道为什么不支持window for docker, 所以选择了Docker Toolbox 的方式,主要是为了学习,虽然这种方式是不建议安装的,但是基础的学 ...

  4. Cesium资料

    CesiumLab论坛:https://github.com/cesiumlab/cesium-lab-forum/issues简书上的Cesium实验室文集:https://www.jianshu. ...

  5. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

  6. firstBlog

    第一篇博客 markdown语法的学习 基本语法 标题与段落 在文字前面加1-6个#号来表示来代表一级标题到六级标题 一级标题 五级标题 列表 对于无序列表,可以使用字符-,+和*作为列表的标记 - ...

  7. js实现自定义弹窗

    众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等.前段时间在慕课网上看到了一个自定义弹窗的实现,自己顺便就学习尝试 ...

  8. JS错误写法[清除DOM]

    前言 我现在总结一下我之前敲代码犯的错误,清除DOM元素,我们开始写代码吧! HTML <h1 style="font-size: 18px;font-weight: bold;col ...

  9. Python基础知识点整理(详细)

    Python知识点整理(详细) 输出函数 print()可以向屏幕打印内容,或者在打开指定文件后,向文件中输入内容 输入函数 input([prompt])[prompt] 为输入的提示字符.该函数返 ...

  10. Linux 打开core dump功能

    系统打开core dump功能 在终端中输入命令 ulimit -c ,输出的结果为 0,说明默认是关闭 core dump 的,即当程序异常终止时,也不会生成 core dump 文件: 使用命令  ...