先说一下什么是BFC(Block Formatting Contexts)

BFC:块级格式化上下文(独立的渲染区)。通俗的说是块级元素布局逻辑或规则,想要触发BFC就要是块级元素,要不把它转为块级元素(display:block;)

  BFC的触发条件。

1.在html框架中就能触发bfc,也就是一开始我们写块状元素的时候它会垂直放置,而不会水平放置。因为这是bfc的布局规则(每个元素独占一行)。

2.当float的属性值不为none时,也就是左右浮动时,就能触发BFC。

3.position是absolute(绝对定位)或fixed(固定定位)。

4.display为inline-block,table-cell,table-caption,flex,inline-flex

5.overflow不为visible。

  BFC的布局规则。(满足触发条件)

1.在两个块级元素中,给它们添加一下一上margin时你会发现它们的距离不会累加,只会显示最大的margin。这就是BFC的布局规则,只要在一个块级元素中套入另一个BFC就可以解决。

在一个div中套入另一个div不要让它们同级。

分别设置两个上下margin的值为30px,给第二个的父元素添加overflow:hidden;让它形成BFC。运行就可以显示累加边距。

  代码。设置上div边距margin-bottom:30px;下div边距margin-top:30px;

overflow:hidden;为触发BFC条件。

  运行结果如下,两个div边距就为60px

2.BFC内部的box为在垂直方向,一个接一个放置,(见上触发条件1)

3.每个元素的margin box的左边,与包含块border box的作用相接触。

4.BFC的区域不会与float box重叠。

  当左边box为浮动时,右边是BFC区域,二者不会重叠。

  

运行结果:

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

6.当计算BFC的高度时,浮动元素也参与计算。

  比如父元素不设高度时,子元素是浮动元素,这样父元素的高度就会塌陷,影响页面布局。让父元素触发BFC就可以解决(如overflow:hidden),因为BFC会计算浮动元素的高度

  BFC布局与普通文本布局的区别

1.BFC不会和浮动的元素重叠,普通文本会重叠。

2.BFC会计算浮动元素的高度,使父元素不会塌陷。普通文本不会计算,父元素高度会塌陷。

3.BFC会计算上下块元素margin的边距,普通文本只会显示上下块元素最大的margin。

4.BFC中的margin不会传递给父级,普通文本的margin会传递给父级。

BFC的语法的更多相关文章

  1. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  2. BFC,定位,浮动,7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  3. 浅谈BFC

    Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Fo ...

  4. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  5. CSS3与页面布局学习笔记(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  6. BFC and Haslayout

    一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC flo ...

  7. CSS3与页面布局学习总结(三)——BFC、定位、浮动、垂直居中

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  8. (转载)CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  9. 前端笔记之CSS(下)浮动&BFC&定位&Hack

    一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...

随机推荐

  1. 如何在GitHub上大显身手?

    推荐一篇良许大佬的文章,如何在github上大显身手.拥有自己的github,且有所贡献,这是一件很有意义的的事情,在面试上也是加分项哦,赶紧搞起来. 转载至http://uee.me/aHAfN 这 ...

  2. 通过示例学习rholang(上部:课程0-6)

    通过例子和实践来学习rho语言.下面的例子和练习都很值得去运行.阅读.修改和完善.修改练习和教程中任何你感到有意思的代码,这样能够获得最好的学习效果.该教程包含了rho语言最常见以及最重要的特性,足以 ...

  3. python+win32--com实现excel自动化

    import win32com  APP_TYPE = 'Excel.Application'  xlBlack,xlRed,xlGray,xlBlue = 1,3,15,41 xlBreakFull ...

  4. selenium-第一个自动化脚本

    经过上一篇的环境搭建,这一篇我们开始编写第一个自动化脚本. 一个简单的测试百度的demo #coding=utf-8 from selenium import webdriver driver = w ...

  5. 团队第一次作业(By七个小矮人)

    一.团队简介 1.团队名称:七个小矮人 2.团队成员列表 201731024137 马驰(队长) 201731021227 于丁 201731024114 杨汶桐 201731024125 李朋珂 2 ...

  6. Windows玩转Kubernetes系列2-Centos安装Docker

    接上一章,Windows玩转Kubernetes系列1-VirtualBox安装Centos,我们开始学习如何在Centos中安装Docker 准备 关闭防火墙 防火墙一定要提前关闭,否则在后续安装K ...

  7. Tornadofx学习笔记(2)——FxRecyclerView控件的打造

    Tornadofx是基于javafx的一个kotlin框架,用来写些电脑版的小程序 基于Scroll Pane控件,仿造Android中的RecyclerView,实现的一款tornadofx的控件 ...

  8. 讲解 json 和 pickle 模块

    首先是引入json 和 pickle 的原因是 普通的方法支持的数据类型太少 局限性大  比如下面的例子 dit = {'name':'deng1mei','age':'26','sex':'girl ...

  9. 模块化系列教程 | 阿里JarsLink1.0模块化场景实战Demo

    场景实战Demo使用指引 Quickstart 快速开始 Demo说明 模块说明 使用说明 情景一环境部署 工作原理 情景二环境部署 工作原理 场景实战Demo使用指引 个人之前学习过程中对JarsL ...

  10. SpringBoot学习(1) - 日志

    package com.study.spring_boot_log; import org.springframework.boot.SpringApplication; import org.spr ...