bfc

盒子模型 在页面中，我们将所有的元素全部看做是一个盒子，页面布局就是将大大小小不同的盒子堆砌在一起，而一个盒子由以下几部分组成： padding：内边距，内容到边框的距离； margin：外边距，其他盒子到当前盒子的边框的距离； border： 边框； 所以一个元素在页面中实际所占的空间是： 内容+padding+border+margin（注意：padding/margin/border上下或者左右都有，所以计算时要算上设置的值得两倍；） 怪异盒子模型： 怪异盒子模型所设置的宽高即为其在页面中最终所占的位置，边框、内外边距所占的位置越大则内容区域越小。 开启怪异盒子模型的方法：box-sizing:border-box; 其最先由IE浏览器提出并使用，后被广泛使用。 margin塌陷：当使用margin来调整两个元素之间的距离时，并不会以两个元素之间的margin之和来表示，而是以两个元素的margin最大值为准。 解决的方法：触发BFC（会计格式化上下文） 页面中实现多出内容省略号显示的方法（CSS）： 首先为容器设置一个宽度； 然后设置文本内容不换行：white-space:nowrap; 之后是设置溢出隐藏：overflow:hidden； 最后则是在内容最后显示省略号：text-overflow:ellipsis; tips：以上方式仅对单行文本溢出有效（不建议使用）

bfc（block formatting context） 块级格式化上下文 生成bfc的方式： 1、根元素； 2、float属性不为none（脱离文档流）； 3、position为absolute或者fixed的时候； 4、display为inline-block、table-cell、table-caption、flex、inline-flex； 5、overflow不为visible（默认）。 渲染的流程： 文档解析成对象模型（dom），通过选择器给对应的元素加上样式，根据渲染规则到显存区域，渲染过程中用到的数据通过上下文来获取。 bfc：渲染时用于保存临时数据和获取外部数据的容器。 HTML和body都是bfc。 bfc的应用： 自适应两栏布局； 清除内部浮动； 防止垂直margin塌陷； ....... 响应式布局： 三要素：弹性图片、媒体查询、弹性布局 响应式布局开发概念：移动端优先和PC端优先 根据当前项目的用户比例进行设计，项目的主要用户为移动端用户时采用移动端优先布局，否则采用PC端优先布局。 视口： 布局视口：网页在移动端中渲染出的区域，用来加载网页； 可视视口：浏览器的窗口； 理想视口：由乔布斯提出，当布局视口大小与可视视口大小相同的时候就是理想视口。 css伪元素 伪元素根据字面理解就是伪装成元素，但是 伪元素 并不是 元素 ，而是于生成的内容相关联

　 简单介绍BFC 　BFC 　　就是块级格式化上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。 　创建 BFC 的方式有： 　　1.html的根元素 　　2.float浮动 　　3.绝对定位 　　4.overflow不为 visible 　　5.display为表格布局或弹性布局 　　6.contain值为layout 　　7.content或 strict的元素等。 　 　BFC的作用： 　　1.清除浮动 　　2.解决margin塌陷问题 　 　BFC的特点： 　　1.内部box会一个一个的垂直放置 　　2.形成了BFC的区域不会与float box重叠，BFC在页面是个独立的容器，里外元素互不影响 　　3.BFC在计算高度时会把浮动元素计算进去 　　4.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘） 来源： https://www.cnblogs.com/funseey/p/11431733.html

BFC 的概念 　　 BFC 是一个容器，是一个独立的布局环境，决定了元素如何对其内容就行定位，以及与其他元素的关系和相互作用；BFC 中的子元素的布局不会受到外界的影响； 　　BFC 的布局规则： 　　　　1)、在 BFC 下，内部的 box 会在垂直方向，一个接一个的放置； 　　　　2)、Box 垂直方向的距离由 margin 决定；属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加； 　　　　3)、在 BFC 中，每一个盒子的左边缘 margin-left 会触碰到容器的左边缘 border-left ，即使存在浮动也会如此； 　　　　4)、BFC 的区域不会与 float box 重叠； 　　　　5)、计算 BFC 的高度，浮动元素也会参与计算； 　　触发 BFC 的条件： 　　　　1)、根元素即html； 　　　　2)、float 的值不为 none； 　　　　3)、overflow的值不为 visible； 　　　　4)、display的值为 inline-block、table-cell、table-caption； 　　　　5)、position 的值为 absolute 或 fixed； 来源： https://www.cnblogs.com/mufc/p/11417902.html

一 常见定位方案 普通流 默认，从上而下，行内元素水平排列，行满换行，块级元素渲染成一个新行。 浮动 先按普通流位置出现，然后根据浮动方向偏移。 绝对定位 元素具体位置由绝对定位坐标组成。 一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 BFC 即 Block Formatting Contexts (块级格式化上下文)，属于普通流。 可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、绝对定位元素，position（absolute，fixed）； 3、display 为以下其中之一的值 inline-block，table-cell，table-caption、flex； 4、overflow 除了 visible 以外的值（hidden，auto，scroll）； 　　5、body 根元素 三、BFC的特性 1.内部的Box会在垂直方向上一个接一个的放置。 2.垂直方向上的距离由margin决定 3.bfc的区域不会与float的元素区域重叠。 4.计算bfc的高度时，浮动元素也参与计算 5.bfc就是页面上的一个独立容器

1.规范解释 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 2.通俗理解 BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且 不会影响其它环境中的物品 。 如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。 浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以 两个浮动元素之间是互不影响的 。 二、创建 BFC 根元素或包含根元素的元素 浮动元素 float ＝ left | right 或 inherit （≠ none） 绝对定位元素 position ＝ absolute 或 fixed display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption overflow ＝ hidden | auto 或 scroll (≠ visible) 三、BFC 的特性 BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。 盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。 在同一个 BFC 中，两个相邻的块级盒子的 垂直外边距

　　最初这篇文章打算回答寒冬大神的 第一问 ，谈谈CSS布局。本来呢我以为布局主要涉及float跟display相关属性，以及他们的包含框、静态位置等等。后来看了大神的一片 面试文章 ，嗯？这里怎么还有个BFC，这是神马东东。待我搜索一下，萨萨萨，不看不知道，越看越糊涂，这到底是个神马东东。。。经过一个周时间的查阅资料和自我思考，在此总结一下我对BFC的认识，愿与各位道友分享，欢迎拍砖！ 　　对CSS有了解的道友们肯定都知道盒式模型这个概念，对一个元素设置CSS，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及 其他的FC 。那首先我们就来看一下FC的概念。 　 Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。 　 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 　　 BFC的生成 　　既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。 根元素 float的值不为none

标题高度塌陷解决方法 根据w3c的标准 在页面中元素都有一个隐含的属性叫Block Formatting Context 简称BFC,该属性可以设置打开和关闭，默认是关闭的 BFC的定义： 是设置元素的一种特性(功能) 1，使 BFC内部浮动元素不会到处乱跑； 2，和浮动元素产生边界。 当开启元素的BFC以后，元素将会有如下的属性 1.父元素的垂直外边距不会和子元素重叠， 2.开启BFC的元素不会被浮动元素所覆盖 3.开启BFC的元素可以包含浮动的子元素 如何开启元素的BFC? 1.设置元素浮动 使用这种可以开启BFC，虽然实现，但是父元素宽度消失，而且下面的元素会上移 2.设置元素绝对定位 3.设置元素display为incline-block 宽度也会消失不推荐 4.将元素的overflow设置为一个非visible的值 推荐方式：将overflow设置为hiddden，是副作用最小的开启方式。 在 ie6中没有bfc的概念，类似的是haslayout来解决该问题，开启方式是将元素的zoom设为1，为了兼容所有浏览器，应将overflow和zoom的属性都写上。 清除浮动 我们有时希望清除掉其他元素浮动的影响， clear可以用来清除兄弟其他元素浮动的影响， left（right both none）：清除左侧浮动元素对当前元素的影响 both:清除影响最大的侧浮动影响

/* *学习过程中整理的笔记 * 关于网页设置高度自适应过程中的高度塌陷问题的解决方法及解释 */ 出现的场景： 当子元素有浮动，父元素没有设置高度，或者设置的是最小高度的时候，父元素会出现高度塌陷问题。 （IE6里面一般不会出现高度塌陷问题，会自己撑开） 解决高度塌陷的方法： 方法1 ：给高度塌陷的元素添加 overflow：hidden 声明。 原理：因为overflow：hidden；触发了一个BFC（独立渲染区），在BFC布局过程中：计算BFC高度的时候，里面的浮动元素也参与计算 -----（后期我学习之后再来解释BFC） 弊端：overflow：hidden会隐藏超出父元素的内容 （不过这里有些不明白，既然父元素已经设置为自适应了，里面的内容只会 撑大父元素，怎么会被隐藏呢？有别的想法的同学可以留言给我解释一下） 方法2 ：给浮动元素的后面再加一个div，并给空的div设置样式{clear：both;(height:0px;overflow:hidden;)} clear：both；起到一个关闭浮动的作用，清除该div前面一个元素浮动预留的空间，使该div服从文本流，在浮动元素换行 显示，从而将父元素撑大。 /*括号内的属性只在IE6中必须加上，而其他浏览器可以不加*/ 弊端：造成代码的冗余。 方法3 ：万能清除法 选择符：after{content : "."

一、什么是高度塌陷？ 简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去 <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > </ title > < style type = "text/css" > .par { border : 1 px solid green ; } .sub { width : 20 % ; height : 50 px ; float : left ; border : 1 px solid red ; } .only { width : 30 % ; height : 60 px ; background : #999 ; } </ style > </ head > < body > < div class = "par" > < div class = "sub div1" > </ div > < div class = "sub div2" > </ div > < div class = "sub div3" > </ div > </ div > < div class = "only" > </ div > </ body > </ html > 上面的这个例子，可以看出来class为par的div的内部是含有三个子div的