BFC和常规流的关系是什么:常规流遵循BFC,IFC规则.

定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex)

其中常规流包括BFC,IFC等规则,块级元素一个一排地从上向下堆放，行内元素从左往右地堆放，这就是一个标准的流程.
(inline-block也属于常规流,暂且把它当作inline)

而浮动和绝对定位是脱离了常规流,改从左往右排，打破次元，从二维表面升起来了，跑到原来位置的上空了。
(其实是别的元素在按照标准流布局时会忽略脱离标准流的元素,说浮起来并不准确,但是容易理解)
至于为什么有inline-block的特性应该是因为不遵循常规流了,或者说就是做了inline-block设置了?(不明白)

浮动可以理解为让某个div元素脱离文档流，漂浮在标准流之上，和标准流不是一个层次。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边
(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，
那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
利用浮动的这个特性可以做一些响应式的布局,虽然它当时的作用仅仅只是文字环绕图片....

绝对定位:和浮动比起来...蒙多想去哪就去哪= =(浮动只能left或者right)

值得一提的是浮动和绝对定位会让自身触发BFC的特性(可以理解为在自身新建了一个魔法盒),
即自身包裹的元素不会受到外界的干扰,也不会干扰外界的元素.
具体可以看下下面的BFC布局规则.原本整个页面只有html有这个魔法盒,里面的元素都在这一个盒子里面,相互影响,
相互干扰,即使是嵌套元素也不例外(所以才有了margin-top合并,塌陷),所以可以利用这个特性清除浮动.

(关于清除浮动以后再谈,清除浮动可以在父元素结尾加元素或伪元素并且让他们clear:both,
也可以让父元素触发BFC特性:计算BFC的高度时，浮动元素也参与计算)

BFC布局规则

1.内部的Box会在垂直方向，一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。
即使存在浮动也是如此。

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

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

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

只要元素满足下面任一条件即可触发 BFC 特性：

1.<html> 根元素

2.浮动元素：float 除 none 以外的值

3.绝对定位元素：position (absolute、fixed)

4.display 为 inline-block、table-cells、flex

5.overflow 除了 visible 以外的值 (hidden、auto、scroll)

https://blog.csdn.net/jiaojsun/article/details/76408215

固定定位：position:fixed;

固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。

固定定位IE6不兼容。

4、关于z-index
z-index值表示谁压着谁。数值大的压盖住数值小的。

只有定位了的元素，才能有z-index值。

也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

z-index值没有单位，就是一个正整数。默认的z-index值是0。

如果都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别的元素。

定位了的元素，永远能够压住没有定位的元素。

HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)的更多相关文章

  1. HTML+CSS : 笔记整理(1)

    meta:页面描述信息(可以在里面加入作者信息等,如: <meta name="description"content="HTML examples"&g ...

  2. CSS学习笔记10 相对定位，绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  3. HTML+CSS : 笔记整理(3 移动端布局简单了解)

    流体布局:宽度用百分比,计算真实宽度用函数 : width: calc(25% - 4px); box-sizing: 1.content-box:默认计算方式 ,宽度和高度分别应用到元素的内容框.在 ...

  4. CSS笔记（十）position属性与定位

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position属性规定了元素的定位类型.任何元素都可定位,其中,绝对或固定元素会 ...

  5. 大前端学习笔记【七】关于CSS再次整理

    如果你在日常工作中使用 CSS,你的主要目标可能会重点围绕着使事情“看起来正确”.如何实现这一点经常是远不如最终结果那么重要.这意味着比起正确的语法和视觉结果来说,我们更少关心 CSS 的工作原理. ...

  6. html+css布局整理笔记

    基本概念 布局模型 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 流动模型 默认的网页布局模式,流动布局模型有两个比较典型的特征: 第一,块级元素都会在所处的包含元素内自上而下按 ...

  7. htm5 css学习笔记整理

    点击链接后退页面: <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式 ...

  8. CSS学习（11）常规流

    盒模型:规定单个盒子的规则 视觉格式化模型(布局规则):页面中多个盒子的排列规则 三种方式: 1.常规流 2.浮动 3.定位 常规流布局 常规流   也可以叫做   文档流.普通文档流.常规文档流 所 ...

  9. 大前端学习笔记整理【二】CSS视觉格式化模型

    1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 ...

随机推荐

  1. 浅析正则表达式模式匹配的 String 方法

    在JavaScript代码中使用正则表达式进行模式匹配经常会用到String对象和RegExp对象的一些方法,例如replace.match.search等方法,以下是对一些方法使用的总结. Stri ...

  2. 基于JQUERY 的图片查看插件

    viewer是一款功能强大的图片查看器.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备,支持键盘控制,功能十分强大 ...

  3. IIS下不能下载文件的docx文档，XLSX文档的设置方法（转）

    IIS下不能下载文件的docx文档,XLSX文档的设置方法 Office 2007的的界面风格默认格式中都是.DOCX,XLSX,PPTX等等后缀,连结中包含此类文件时,界面风格默认什么打不开的其实只 ...

  4. asp.net 单元测试（转）

    最早接触单元测试是看了极限编程相关资料里边讲的测试驱动开发,然后下载了Nunit研究了一下,但并没产生多大的触动,因为那个时候做的都是些时间紧任务重的事情,对于单元测试的直接感觉就是有可能比较费时间. ...

  5. Akka探索第二个例子by fsharp

    本文重度借鉴了github上akkabootcamp教程. 先上代码 open Akka open Akka.Actor open System type Message = | ContinuePr ...

  6. C# Label背景透明

    Label背景透明是相对于Label的Parent而言的,如果Label的Parent是一个winform,而这个winform又有一个PictureBox,现在Label放在PictureBox上, ...

  7. java调用7zip解压压缩包

    前言 最近的项目中需要用到解压缩包的功能,客户给出的压缩包的格式主要是rar和zip,因此就打算使用java调用7zip的命令行进行解压文件,本文主要记录一下实现的过程以及其中遇到的问题. 7zip命 ...

  8. UITableView分隔线

    问题1: 在ios中使用UITableView时,当行数较少是,可能一屏幕能显示完全所有行,这时候会出现下面的问题,显示多余的分隔线 图如下: 解决方案: //解决方案1 //添加如下代码 -(CGF ...

  9. 前端防御XSS

    下面是前端过滤XSS的代码,取自于百度FEX前端团队的Ueditor在线编辑器: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function xssCheck(str,r ...

  10. CommonJS 的实现原理

    CommonJS 使用 Node.js 的四个环境变量moduleexportsrequireglobal 只要能够提供这四个变量,浏览器就能加载 CommonJS 模块. Browserify 是目 ...