块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题

1、什么是BFC？

就是一个封闭独立的渲染的区域

2、什么元素会有BFC的条件？　---块级元素会有，行内元素没有　

3、什么情况下块级元素可以产生bfc？（触发bfc）

四种中有一种就行，可以触发bfc

BFC特性

4、BFC主要用途（块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题）

1、清除浮动

　　　　

　2、解决外边距合并的问题

3、做右侧自适应

css学习_css BFC特性（块级格式化上下文）的更多相关文章

  1. 基础总结（02）--BFC（块级格式化上下文）

    BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...

  2. BFC（块级 格式化上下文）的理解

    本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,B ...

  3. BFC（块级格式化上下文）

    渲染规则 1.内部的box会在垂直方向,一个接一个的放置 2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠 3.每个元素的margin box的左边 ...

  4. css 块级格式化上下文（BFC）

    一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...

  5. 详解块级格式化上下文（BFC）

    相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...

  6. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  7. 块级格式化上下文(block formatting context)

    在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...

  8. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  9. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

随机推荐

  1. 推荐安全且匿名的邮箱 ProtonMail -- PGP算法

    ==以前一直以为平时所用的邮箱是绝对安全的,没有深思它的安全性. 然而你要“犯罪”不留任何痕迹的话,呵呵. 国内应该没有类似 ProtonMail 的邮箱,-->去了解一下 ========== ...

  2. pyhton之Reportlab模块

    reportlab模块是用python语言生成pdf文件的模块 安装:pip install reportlab 模块默认不支持中文,如果使用中文需要注册 1.注册中文字体 下载自己需要的.ttf字体 ...

  3. 4. SpringBoot —— 单元测试

    首先在pom文件中引入spring-boot-starter-test <dependency> <groupId>org.springframework.boot</g ...

  4. git提交忽略某些文件或文件夹

    记得第一次用 github 提交代码,node_modules 目录死活传不上去,哈哈哈,后来才知道在 .gitignore 文件里设置了忽略 node_modules 目录上传.是的, .gitig ...

  5. 【转载】IIS出现“HTTP 错误 500.0，C:\php\php-cgi.exe - FastCGI 进程意外退出”解决方法

    昨天给大家介绍了在windows+iis的平台上搭建支持php+mysql平台的文章,教程步骤都是笔者一步一个操作然后一个记录介绍给大家的,实机演练,教程绝对切实可用,但是不同的同学在不同的环境下按照 ...

  6. bootstrap轮播图 两侧半透明阴影

    用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...

  7. open live write 代码高亮插件的配置和使用

    第一步:下载open live writer插件,下载地址:http://www.cnblogs.com/memento/p/5995173.html 第二步:找到open live writer的安 ...

  8. java----dom4j 解析XML

    dom4j: 由于内部采用迭代器,适合读取大文档: 数据块 1.下载 https://dom4j.github.io/ 2.添加包到工程目录下 使用 import org.dom4j.Document ...

  9. jenkins命令行修改时间

    前言:有时jenkins上的时间和系统时间不同步,但是jenkins又在运行状态,不可重启修改 方法:在jenkins界面上,输入命令 system.setProperty('org.apache.c ...

  10. 如何破解Excel VBA密码

    首先,如果文件格式是(.xslm),需要先打开Excel文件,另存为2003版格式(.xls). 然后用普通的文本编辑器(我用的是NotePad++)打开这个文件,注意文件类型选“所有文件”. 然后在 ...