块级元素会有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. 【Java编程思想笔记】注解--元注解

    参考文章:(小白的小小白的白 )https://blog.csdn.net/weixin_42315600/article/details/80630669 https://www.cnblogs.c ...

  2. from中buttone 和 input type="button" 区别

    在做一个表单提交时碰到的问题, 1.js判断阻止表单提交,如果是form 里面的button的话,恭喜你,你要再换个写法了.<button type="submit" ... ...

  3. 我的pwn笔记

    0.64位程序参数一次保存在RDI,RSI,RDX,RCX,R8和 R9,具体见图 windows64位调用约定 1.<_libc_csu_init>有一些万能gadget,汇编如下 #! ...

  4. 【原创】大数据基础之Zookeeper（3）选举算法

    提到zookeeper选举算法,就不得不提Paxos算法,因为zookeeper选举算法是Paxos算法的一个变种: Paxos要解决的问题是:在一个分布式网络环境中有众多的参与者,但是每个参与者都不 ...

  5. java 利用jsoup 爬取知乎首页问题

    今天学了下java的爬虫,首先要下载jsoup的包,然后导入,导入过程:首先右击工程:Build Path ->configure Build Path,再点击Add External JARS ...

  6. apache安装软负载的配置说明

    安装Apache:yum -y install httpd 首先要查看apache的安装版本 命令:httpd –v 第一种: 若安装是2.2版本,则把复制 mod_wl_22.so和mod_wl.s ...

  7. PHP利用模板消息无限制向用户推送消息

    <?php //获取微信access_token function getaccess_token(){ //appid与appsecret改成你自己的 $appid = '自己的appid'; ...

  8. SA：利用SA算法解决TSP(数据是14个虚拟城市的横纵坐标)问题——Jason niu

    %SA:利用SA算法解决TSP(数据是14个虚拟城市的横纵坐标)问题——Jason niu X = [16.4700 96.1000 16.4700 94.4400 20.0900 92.5400 2 ...

  9. SA：T1编写主函数法和T2Matlab自带的SA工具箱GUI法，两种方法实现对二元函数优化求解——Jason niu

    %SA:T1法利用Matlab编写主函数实现对定义域[-5,5]上的二元函数求最优解—Jason niu [x,y] = meshgrid(-5:0.1:5,-5:0.1:5); z = x.^2 + ...

  10. 还不知道spring的RestTemplate的妙用吗

    为什么要使用RestTemplate? 随着微服务的广泛使用,在实际的开发中,客户端代码中调用RESTful接口也越来越常见.在系统的遗留代码中,你可能会看见有一些代码是使用HttpURLConnec ...