块级元素会有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. JS中some(),every(),forEach(),map(),filter()区别

    JS在1.6中为Array新增了几个方法map(),filter(),some(),every(),forEach(),也就是一共有这么多方法了. 刚开始接触这些倒也记得不是很清楚,在此纪录一下以加深 ...

  2. Vue生命周期中mounted和created的区别

    参考链接:https://blog.csdn.net/xdnloveme/article/details/78035065

  3. XML,json,ajax

    一.XML 1.概述:XML全称为Extensible Markup Language, 意思是可扩展的标记语言 2.版本:W3C在1998年2月发布1.0版本:W3C在2004年2月发布1.1版本, ...

  4. POJ 1251 Jungle Roads （最小生成树）

    题目: Description The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign ...

  5. percona-toolkit 之 【pt-online-schema-change】说明【转】

    背景: MySQL 大字段的DDL操作:加减字段.索引.修改字段属性等,在5.1之前都是非常耗时耗力的,特别是会对MySQL服务产生影响.在5.1之后随着Plugin Innodb的出现在线加索引的提 ...

  6. HDR拍照

    HDR 拍照:        (High Dynamic Range Imaging)高动态范围成像,是用来实现比普通数字图像技术更大曝光动态范围(即更大的明暗差别)的一组技术.高动态范围成像的目的就 ...

  7. Javascript—DOM

    1.什么是DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本 ...

  8. pip install psycopg2出现python setup.py egg_info failed with error code 1 in /tmp/pip-build-YtLeN3/psycopg2错误处理

    折腾了一上午flask部署,到最后访问域名还是出现Application Error错误提示.估计是程序还有问题,想着直接clone书中作者的代码先试试能不能部署成功.结果在执行pip install ...

  9. 【python】实用的logging封装

    #!/usr/bin/python import logging import logging.handlers def set_logger(filename, logmod): log_size ...

  10. 基于Spring Boot框架开发的一个Mock

    背景:在项目后端接口开发还未完成,我们无法进行自动化接口用例的调试,希望与开发同步完成接口自动化用例的编写及调试,待项目转测后,可以直接跑自动化用例,提高测试效率. 选用的maven + Spring ...