BFC触发
1.根元素
2.float
3.overflow:auto,scroll,hidden(常用)
4.display:table-cell,table-caption,inline-block,flex,inline-flex;
5.position:absolut,fixed
BFC布局规则
1.背部的box会在垂直方向上一个接一个放置
2.。。。。
运用:
1.当浮动元素导致它的弟弟元素受影响时,给弟弟元素添加BFC(overflow:hidden)
2.当浮动导致元素的父级高度为0时,可以给父级加BFC(overflow:hidden)
3.当元素的设置位置到父级的范围时,给父级加BFC(overflow:scroll)
4.解决上下div的margin值相加:在两个div之间设置一个空的div<div id='k'></div>,css设置:#k{overflow:hidden}
5.当浮动元素设置margin值导致其父级的margin值改变而本身不改变时,给父级元素添加BFC(overflow:scroll)
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*1*/
.box1,.box2,.box3{width: 200px;height: 200px;background: red}
.box2{width: 500px;height: 250px;background: yellow;overflow: hidden}
.box1{float: left;}
/*4*/
.box3{margin-bottom: 50px}
.box4{margin-top: 50px;background: red;width: 200px;height: 200px;}
#k{overflow: hidden}
/*2*/
ul{border: 1px solid black;overflow: hidden}
ul li{float: left}
/*5*/
.pa{
width: 200px;
height: 500px;
background: green;
overflow: hidden;
/*如果不设置此BFC,当pa_1设置上面外边距时,父级带着子元素向下移动子元素的margin-top值*/
}
.pa_1{
width: 100px;
height: 50px;
background: red;
margin-top: 100px;
}
.pa_2{
width: 100px;
height: 50px;
background: orange;
}
/*3*/
.pa2{
width: 500px;
height: 100px;
background: green;
overflow: scroll;
/*overflow-x: scroll;*/
/*overflow-y: scroll;*/
}
.pa2_1{
width: 100px;
height: 50px;
background: red;
}
.pa2_2{
width: 100px;
height: 50px;
background: orange;
margin-left: 800px;
}
</style>
</head>
<body>
<!--1-->
<div class="box1">1</div>
<div class="box2">2</div>
<!--4-->
<div class="box3">3</div>
<div id="k"></div>
<div class="box4">4</div>
<!--2-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--5-->
<div class="pa">
<div class="pa_1"></div>
<div class="pa_2"></div>
</div>
<!--3-->
<div class="pa2">
<div class="pa2_1"></div>
<div class="pa2_2"></div>
</div>
</body>
</html>
###BFC
**BFC** (Block Formatting Context) 块级格式化上下文
是一个环境,一个隔离的独立容器,与布局相关,写了 html 标签他就已经是一个 BFC 环境了。给其余的 box 设置 BFC 环境就是为了让它成为一个独立的空间。表现原则为:内部子元素再怎么翻江倒海都不会影响外部的元素,反之如此。避免margin穿透啊、清除浮动什么的。
box 是 CSS 布局的对象和基本单位,直观来说就是一个页面由很多个 box 组成,元素的类型和 display 属性决定了这个 box 的类型,不同类型的 box 会参与不同的 formatting context
* display 为 block、list-item、table 的元素会生成 block-level box 并且参与BFC;
* display 为 inline、inline-block、inline-table 的元素会生成 inline-level-box 并且参与IFC;
**formatting context** 是 W3C CSS2.1 规范里的一个概念。它是页面中的一块渲染区域,并且有一套规则,它规定了其子元素将如何定位,以及和其他元素的关系和相互作用。
*CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。*
**BFC布局规则:**
1. 内部的 box 会在垂直方向一个接一个放置
2. box 垂直方向的距离由 margin 决定,属于同一个 BFC 的2个相邻 box 的 margin 会重叠
3. 每个元素的 margin box 的左边与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)即使浮动也是如此
4. BFC 的区域不会与 float box 重叠
5. BFC 就是页面上的一个隔离的独立容器,容器里的子元素与外界无关不会相互影响
6. 计算 BFC 高度时,浮动元素也参与计算
何时会触发bfc呢:常见的如下:
1. 根元素
2. float;
3. overflow: auto、scroll、hidden;
4. display: table-cell、table-caption、inline-block、flex、inline-flex;
5. position:absolut、fixed;
实验1:因浮动影响发生重叠,自适应两栏布局
```
body{
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
background: #f66;
float: left;
}
.main {
height: 200px;
background: #fcc;
}
<div class="aside"></div>
<div class="main"></div>
```
此时会发现,main 的左边覆盖在了 aside 下面。
根据BFC布局规则第三条说:每个元素的 margin box的左边与包含块border box的左边相接触,即使浮动也是如此。<br/>而第四条规定 BFC 区域不会与 float box 重叠,所以,我们给 main 添加 overflow:hidden; 触发BFC,也可以实现自适应两栏布局
实验2:
经典的上边距重叠的问题
```
.main{
background-color: darkgrey;
width: 700px;
}
.first{
margin-top: 100px;
width: 50px;
height: 50px;
background-color:#000000;
}
.second{
width: 50px;
height: 50px;
background-color: blue;
}
<div class="main">
<div class="first"></div>
<div class="second"></div>
</div>
```
此时会发现,因为子元素的margin-top导致整块div都移动,给父级加上 overflow:hidden; 触发 BFC
实验3:影响别的元素
```
.main{
background-color:darkgrey;
width: 700px;
}
.first{
width: 50px;
height: 50px;
background-color: #000000;
}
.second{
width: 50px;
height: 50px;
background-color: blue;
margin-left: 800px;
}
```
此时,会发现,second超出了main,影响到了其它的元素,给main触发BFC,这样就不会影响到其它元素了
实验4:因浮动导致文字环绕
```
.box {
width:210px;
border: 1px solid #000;
float: left;
}
.img {
width: 100px;
height: 100px;
background: #696;
float: left;
}
.info {
background: #ccc;
color: #fff;
}
<div class="box">
<div class="img">image<div>
<p class="info">hello world<p>
</div>
```
此时,当文字变多时,会出现文字环绕,所以,我们给p标签触发BFC
实验5:因子元素的浮动导致父元素的高度塌陷
```
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
```
此时,我们会发现浮动后,2个子元素并没有撑开父级,导致了父级的高度塌陷。<br>而根据BFC第六条规则:计算BFC高度时,浮动元素也要参与计算,所以为了达到清除内部浮动我们给父级 .par 触发BFC
实验6:margin重叠
```
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
<p>Haha</p>
<p>Hehe</p>
```
此时,我们会发现p与p之间的 margin 发生了重叠.<br>根据BFC第一条规则:2个相邻的普通流重的块框在垂直位置的空白边会发生折叠现象,第二条规则:box垂直方向的距离由 margin 决定,<br/>属于同一个BFC的2个相邻box的 margin 会发生重叠,<br>我们可以插入一个空标签,给这个空标签触发BFC,或者可以在第二个p外面包裹一个div触发BFC。这样,就使2个p不处于同一个BFC。