bfc

两栏布局是写页面时经常用到的，要想实现两栏布局，就需要明白BFC规则，Block formatting context，直译为“块级格式化上下文”，可以简单的理解它为一个独立的区域，把区域内部元素与外部元素区分开，两者互不干扰。 它的规则： 1.内部元素会在垂直方向一个接一个放置。 2.属于同一个BFC的两个元素上下margin会重叠。 3.独立的BFC的区域不会与浮动元素重叠。 4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 5.计算BFC的高度时，浮动元素也参与计算 BFC规则无处不在，根元素html就是一个大的BFC区域，日常练习中遇到的margin上下重叠的bug就是这个原因，另外元素有以下属性之一也可以触发BFC： 1.float属性不为none 2.position为absolute或fixed 3.display为inline-block, table-cell, table-caption, flex, inline-flex 4.overflow不为visible 一、两栏布局。 这里记录的方法是通过浮动实现两栏布局，当我们分别给左右两个元素设置左右浮动的时候，两者脱离了文档流，父元素box就会因为没有高度而高度塌陷。这时候就可以把box设置成一个BFC区域，让它内部的浮动元素参与到高度的计算中。 代码： <!DOCTYPE

今天想给大家分享一下有关于BFC的一些知识，作为我上个星期在逆战班所学到的知识总结。 BFC是H5里一个非常重要的知识点，我们来简单了解一下。 什么是BFC 首先：什么是BFC呢？ BFC是Block formatting context的缩写，直译为“块级格式化上下文”。简单来说，就是它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC的布局规则 那么说完什么是BFC，我们再来简单说一下BFC的布局规则，这里有六条，我来简单介绍一下： 1：内部的Box会在垂直方向，一个接一个地放置。如图： 2：Box垂直方向的距离由margin决定。属于同一个BFC里的两个相邻的Box的margin会发生重叠。如图: 上面这张图，我给上面的box设置了mrgin-bottom:50px;下面的box设置了margin-top:50px;但是他们之间的间距就只有50px； 注意：重叠后会以两个margin里的最大值来显示。 3：每个元素的margin box的左边，与包含块border box的左边相接触。如图： 4：BFC的区域不会与float box 重叠。如图： 上图左右两边的box全部是浮动元素，不会覆盖中间的box。 5：BFC就是页面上的一个隔离的独立容器

浮动 浮动是css里面布局最多的一个属性，也是很重要的一个属性。 float：表示浮动的意思。它有四个值。 none: 表示不浮动，默认 left: 表示左浮动 right：表示右浮动 看一个例子 html结构： <div class="box1"></div> <div class="box2"></div> <span>路飞学城</span> css样式： .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } 我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。 那么浮动如果大家想学好，一定要知道它的四大特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 浮动元素脱标 脱标：就是脱离了标准文档流 看例子 <div class="box1">小红</div> <div

左侧浮动或者绝对定位，右侧通过margin撑开 使用flex 使用<div>包含，然后靠margin形成bfc（百科： block formatting context块级格式化上下文 bfc是一个独立的渲染区域，只有block-level box参与，他规定了包括内部的block-level box如何布局，并且与这个区域外部毫不相干。 bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此，包括浮动和外边距合并等等，有了这些特性我们布局的时候就不会出现意外了情况了。 哪些情况下会产生bfc display属性为block，list-item，table的元素，会产生bfc。（最常用的就是块级元素） 什么情况下会触发bfc 设置了float属性，并且不为none position属性为absolute或者fixed display为inline-block，table-cell，table-caption，flex，inline-flex overflow属性不为visible ） 来源： https://www.cnblogs.com/1998Archer/p/12373508.html

　　 最近学习了BFC，开始学习的时候，单纯看概念，有种云里雾里的感觉，字都认识，凑一起啥意思大致也知道，但是具体有什么用呢？ 这个就有点迷迷糊糊的，经过老师的讲解，以及自己课后的代码实验与总结，就拨云见日了，在这里分享自己对BFC的一些理解。 BFC的概念： 　 　BFC 即（Block Formatting Context）块级格式化上下文，指一个独立的块级渲染区域，只有块级盒子（box）参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 　　　　与之对应的还有IFC、GFC、FFC。 BFC的形成： 　　 1、根元素 html标签就是一个bfc 　　 2、float的值不为none 　　3、overflow的值不为visible 　　 4、display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex 　　5、position的值为absolute或fixed BFC的特性： 　　 1、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠 　　2、计算BFC的高度时，浮动元素也参与计算 　　3、BFC的区域不会与float box发生重叠 　　4、BFC内部的Box会在垂直方向，一个接一个的放置。 　　5、每个元素的margin

回想第一次听到BFC的时候，是在解释为什么高度塌陷可以用overflow:hidden;等方法来解决的时候，当时BFC对我来说还是一个陌生的概念。在解决高度塌陷的问题的时候，通过BFC的触发条件之一触发BFC后，在计算BFC的高度的时候，浮动元素就可以参与计算了。 BFC(Block Formatting Contexts)即块级格式化上下文，首先得是块元素，其次具备触发条件之一的才可以是BFC。 BFC的触发条件可以是 根元素；html标签本身就是一个BFC float的值不为none overflow的值不为visible display的值为inline-block/table-cell/table-caption/flex/inline-flex position的值为absolute或fixed 得知怎么能触发BFC之后，就来到了我今天要说的触发BFC之后，利用BFC的其中一个特性可以实现自适应两栏布局。BFC的这个特性是，BFC的区域不会与浮动元素发生重叠。这个特性也可以解释为什么多个元素浮动之后会横着排。 当上面的一个元素浮动，下面的一个元素没有浮动的时候，会发生重叠，原因是浮动之后不占据位置，所以下面的元素会上去。 <style type="text/css"> body{margin: 0;padding: 0;} .box1{width: 100px

一、什么是BFC？(概念) BFC 即 Block Formatting Contexts (块级格式化上下文)，是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与外部毫不相干 。通俗一点来讲，可以把BFC看成是一个985或者211的高校。 二、BFC的触发条件 根元素 html标签就是一个bfc float的值不为none overflow的值不为visible display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex position的值为absolute或fixed 三、BFC特性及作用（应用场景） 1. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠 （应用：可以解释为什么margin上下回重叠，以及解决方法的原因） ### 问题案例 1 ： margin重叠问题 margin塌陷问题 ：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用 overflow：hidden 产生bfc来解决。 <style> .box1

BFC（Block Formatting Context）块级格式化上下文 注意：BFC首先是块，其次需要具备下面的条件之一才可以（通俗来说，BFC就好比一所985或者211的高校，想要成为985或者211的高校，它是有前提条件的，首先他得是一所大学，不能拿一个小学来说，就好比BFC得先是块，才是BFC；当满足了前提条件，再需要具备其他的条件才可以。） 在正式说BFC具体内容之前，先说一下Box和Formatting Context是个什么东西： Box ：大家应该都不陌生，Box是CSS布局的对象和基本单位，直观点说就是一个页面是由很多个Box组成的。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式来渲染。 常见盒子类型： block-level box：display 属性为block, list-item, table 的元素，会生成block-level box。并且参与block fomatting context。 inline-level box：display属性为 inline, inline-block, inline-table 的元素，会生成inline-level box。并且参与inline fomatting context。 run-in box：CSS3中新增的

http://davidshariff.com/quiz/ 做了下这里面前端开发面试的题，发现有些不会，所以在此做个整理以供自己学习，参考，总结。 1.问: CSS属性是否区分大小写？ ul { MaRGin: 10px; } 答：不区分。（HTML, CSS都不区分，但为了更好的可读性和团队协作，一般都小写，而在XHTML 中元素名称和属性是必须小写的。） 2.问：对行内元素设置margin-top 和margin-bottom是否起作用 答：不起作用。（需要注意行内元素的替换元素img、input，他们是行内元素，但是可以为其设置宽高，并且margin属性也是对其起作用的，有着类似于Inline-block的行为）。看具体效果： <style> div { width: 500px; height: 500px; margin-top: 100px; margin-left: 100px; background: lightblue; } span { margin: 100px; } img { margin: 100px; } </style> </head> <body class="claro"> <div class="test_wrap"> <span> 我是行内元素，设置margin看是否对我起作用 </span> <img src="" alt=

一、什么是BFC？ BFC（Block Formatting Context） Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context； inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context； run-in box: css3 中才有 Formatting Context Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有