块级元素会有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. spring+springMVC+mybatis简单整合

    spring+springMVC+mybatis简单整合, springMVC框架是spring的子项目,所以框架的整合方式为,spring+Mybatis或springMVC+mybatis. 三大 ...

  2. ado.net 使用：ExecuteReader 无法获取输出参数

    解决方法: 要获取到输出参数.需要连接关闭之后才行. 一般都是用using把打开数据库连接的reader包起来

  3. Oracle 数据文件迁移

    背景 这两天做一个oracle数据库迁移,以前都是用exp.imp来走,这次用到了expdp.impdp,的确有些优势,但同时又想起了只是拷贝数据文件迁移的方式,其实这个方式不常用做迁移,更多用在磁盘 ...

  4. 2017蓝桥杯第十题（k倍区间）

    #include<iostream> #include<stdio.h> using namespace std; ; ],a[N]; int lowbit(int n){ r ...

  5. 【原创】运维基础之Docker（2）通过docker部署zookeeper nginx tomcat redis kibana/elasticsearch/logstash mysql kafka mesos/marathon

    通过docker可以从头开始构建集群,也可以将现有集群(配置以及数据)平滑的迁移到docker部署: 1 docker部署zookeeper # usermod -G docker zookeeper ...

  6. Linux系统xinetd服务启动不了

    Linux系统xinetd服务启动不了 xinetd服务时发现xinetd服务启动不了,并出现错误提示xinetd:unrecognized service,当出现这个错误提示的时候说明系统未安装xi ...

  7. 【深度学习】吴恩达网易公开课练习(class2 week1 task2 task3)

    正则化 定义:正则化就是在计算损失函数时,在损失函数后添加权重相关的正则项. 作用:减少过拟合现象 正则化有多种,有L1范式,L2范式等.一种常用的正则化公式 \[J_{regularized} = ...

  8. OpenCV-Python：形态学操作

    常用的形态学操作:腐蚀.膨胀.开运算和闭运算 一.什么叫形态学操作 形态学操作就是改变物体的形状,比如腐蚀就是"变瘦",膨胀就是"变胖" 形态学操作一般作用于二 ...

  9. 金蝶K3 WISE BOM多级展开_销售成本表

    /****** Object: StoredProcedure [dbo].[pro_bobang_SaleCost] Script Date: 07/29/2015 16:13:43 ******/ ...

  10. 使用wps插件，实现word转PDF

    项目需求:不打算用office自带的组件实现word转pdf操作 环境需求:安装wps2016专业版 新建一个控制台应用程序 添加引用:在COM下 Kingsoft Add-In Designer和U ...