你以为我要先讲什么是bfc吗？
1.overflow是什么？
根据MDN的定义：
overflow是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时overflow默认属性是overflow: visible，即可见，不隐藏。换overflow: hidden;后溢出的元素就会被隐藏了
<!-- css --> <style> .hiden{ overflow: hidden; width: 10px; background-color: rgb(9, 226, 218); } .no{ width: 10px; background-color: rgb(9, 226, 218); } </style> <!-- html --> <body> <div> <p class="hiden">12345678910</p> <p class="no">12345678910</p> </div> </body>
效果如图：
可以很明显的看到，第一个给了hiden的盒子，里面的超出了10px的东西都被隐藏，而第二个没有的，就突破了盒子的大小
2.overflow是干嘛的？
overflow用过的人都说好，那为什么好呢？
解决float造成的塌陷问题，overflow：hiden可以清楚浮动，原理就是触发bfc
<!-- css样式 --> <style type="text/css"> .box{ background:skyblue; } .kid{ width: 100px;height: 100px; float:left;} .kid1{ background: yellow; } .kid2{ background: orange; } .wrap{ width: 300px; height: 150px; background: blue; color: white; } </style> <!-- html --> <body> <div class="box"> <div class="kid kid1">子元素1</div> <div class="kid kid2">子元素2</div> </div> <div class="wrap">其他部分</div> </body>
可以看到，在没有overflow：hiden的情况下，其他部分被浮动的子元素1，2挡住了，而原因就是 由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。
<!-- css样式 --> <style type="text/css"> .box{ background:skyblue; overflow: hidden; /*清除浮动*/ zoom:1; //兼容性设置，防止ie浏览器不兼容 } .kid{ width: 100px;height: 100px; float:left;} .kid1{ background: yellow; } .kid2{ background: orange; } .wrap{ width: 300px; height: 150px; background: blue; color: white; } </style> <body> <div class="box"> <div class="kid kid1">子元素1</div> <div class="kid kid2">子元素2</div> </div> <div class="wrap">其他部分</div> <body/>
那么可以看到，这次的其他部分就没有被子元素给挡住
2. 解决外边距塌陷问题
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- css样式 --> <style type="text/css"> .box{ background:skyblue;} .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px} </style> <!-- html --> <body> <div class="box"> <div class="kid">子元素1</div> </div> </body> </html>
这里的子元素应该是与父元素在高度上有距离的，又边距的重叠导致效果无法出现的bug
使用overflow：hiden后如下：
<!-- css样式 --> <style type="text/css"> .box{ background:skyblue; overflow: hidden; /*解决外边距塌陷*/ } .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px} </style> <!-- html --> <body> <div class="box"> <div class="kid">子元素1</div> </div> </body>
这里就可以看到，问题解决了
所以什么是BFC?
上面我们使用的overflow：hiden解决的问题，实际上是触发了bfc机制，然后实现了我们想要的效果
1.bfc定义
套用官方的话：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
1.Box：css布局的基本单位
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
2.Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
2.bfc布局规则
-
内部的Box会在垂直方向，一个接一个地放置。
-
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
-
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
-
BFC的区域不会与float box重叠。
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时，浮动元素也参与计算。
3.如何创建bfc
-
1、float的值不是none。
-
2、position的值不是static或者relative。
-
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
-
4、overflow的值不是visible
4.bfc的作用
1.解决float造成的塌陷问题与margin边框重叠，方案就在上面的overflow上
2.实现自适应两栏：
因为：每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
又因为：BFC的区域不会与float box重叠，所以我可以让right单独触发一个bfc事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
overflow: hidden;
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
right会自动的适应宽度，这时候就形成了一个
两栏自适应的布局
总结
以上例子都体现了：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
1216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
