写页面时会遇到：
子元素float父元素的高度不会撑开;
在布局时，box1and box2,其中box1 float：left，这是box2会在box1下面，(如果文字过多就会形成文字环绕效果)，但我就是想要box2在box1的右侧;
又或是上下两个box的margin重叠。
这些问题除了其他一些方法解决外，都可以利用加上overflow:hidden，但是why?其实 BFC的作用呢。
BFC??啥？
BFC这个词....
BFC：全称box formatting context;即块格式上下文，block-level元素参与；
那么什么是block-level呢？
等等 等等...
"W3C" CSS2.1规范：
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the "display"property make an element block-level: "block", "list-item", and "table".
块级元素是源文档中被视为块（例如段落）可视化格式的那些元素。 "display"属性的以下值构成一个块级别："block"，"list-item"和"table"。
那它是怎么形成的呢？
以下情况之一：
float值不为none
position:fixed / absolute
display:table-cell / table-caption /inline-block / flex / inline-flex.
overflow属性不为visible
我们知道了什么是BFC,如何形成BFC，接下来就要说BFC的布局规则啦
滴滴滴...
内部的box会一个接一个地垂直布局。
两个相邻box的垂直距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个盒子的左外边框紧挨着左边框的包含块(从左往右的格式化时，否则相反)。即使存在浮动也是如此
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算.
该知道的理论也差不多了，该解答了~
问题1：子元素float父元素的高度不会撑开
效果：
我们看到container只是right的高，而left中float使该元素脱离了文档流它的高没有计算在内，现在要想left的高度计算在内，根据BFC布局规则6就可以，形成一个BFC区不就可以计算float的高度喽，来，上码：
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
overflow: hidden;
}
果真嘿，其实，这里不止加overflow：hidden,加上边介绍任何一种可以形成BFC区奏行，比如：overflow: auto; / float: left; /display: flex;等等，根据项目中的实际需求。
2.问题2：box2在box1右侧
在问题1里的代码基础上，把right区增加一个高度比如300px，就可以看到效果liu
.right{
background: #FFCCFF;
height: 300px;
overflow: hidden;
}
由于left块float的原因，导致right在left下面，解决此问题
根据BFC布局规则4 ：BFC的区域不会与float box重叠，那么right形成BFC区
效果：
哇，好了呀！
问题3：magin重叠问题
我们大多以为是80px，可结果却是50px!
why?
BFC原则2指明了同一个BFC区的margin垂直重叠，不在同一个是不是就不重叠了，来来来
...
.wrapper{
overflow:hidden;
}
...
我是box1
我是box2
ok!通过给box1或box2添加一个父元素形成和另一个不在同一区。
关于垂直margin折叠
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值;
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值;
两个外边距一正一负时，折叠结果是两者的相加的和;
最后的最后，欢迎指正~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51935.html
摘要：布局中有一些概念，一旦你理解了它们，就能真正提高你的布局能力。我们通常有两种方法来解决这个布局问题。是布局中的一个迷你布局你可以将看作是页面内的一个迷你布局。理解浏览器如何布置网页是非常基础的。 CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么...
摘要：当一个内联元素想获得就要使用这个属性。下因为导致的浮动元素与普通元素之间产生代码如下我是浮动元素我是后面的文字，用来测试的正常情况下解决方式加一个的不只是文字，的浮动元素也会和内联元素产生的值。设置属性的元素不和任何元素发生合并。 发现我好久没更新博文了=-=这里把我之前在博客园写过的一篇关于BFC的文章粘贴过来，顺便自己也再次做个总结。 最近看了一篇总结ie常见bug的文章，里面提...
摘要：当一个内联元素想获得就要使用这个属性。下因为导致的浮动元素与普通元素之间产生代码如下我是浮动元素我是后面的文字，用来测试的正常情况下解决方式加一个的不只是文字，的浮动元素也会和内联元素产生的值。设置属性的元素不和任何元素发生合并。 发现我好久没更新博文了=-=这里把我之前在博客园写过的一篇关于BFC的文章粘贴过来，顺便自己也再次做个总结。 最近看了一篇总结ie常见bug的文章，里面提...
摘要：而就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到的神奇之处。实例解决侵占浮动元素的问题我们知道浮动元素会脱离文档流，然后浮盖在文档流元素上。 在写样式时，往往是添加了一个样式，又或者是修改了某个属性，就达到了我们的预期。而BFC就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到BFC的神奇之处。 一、什么是BFC（Block Form...
阅读 857·2023-04-26 00:11
阅读 2657·2021-11-04 16:13
阅读 2104·2021-09-09 09:33
阅读 1475·2021-08-20 09:35
阅读 3821·2021-08-09 13:42
阅读 3609·2019-08-30 15:55
阅读 1050·2019-08-30 15:55
阅读 2220·2019-08-30 13:55
