BFC

BFC是什么？

BFC是块级格式化上下文
BFC是相当于html中的一个“独立王国”有权接管内部的全部元素，也包括了“浮动元素”。
BFC有三个特质：1.能够包含住浮动元素。2.不会在垂直方向产生外边距的折叠。3.不会与外部的浮动元素重叠。

BFC的特征1：包含住浮动元素

代码主体：
`<body>
<div class="container">
</div>
</body>`

<div class="box"></div>

代码样式：
`<style>

{
</style>`

/* 转为ie盒子 */
box-sizing: border-box;
}
.container {
/* 虚线 */
border: 5px dashed;
border-top-color: red;
border-bottom-color: green;
}
.container > .box {
color: #000;
width: 10em;
height: 5em;
background-color: gold;
border: 2px solid;
/* 设置浮动 */
float: left;
}
/* 容器中的子元素浮动会导致父级容器的高度的消失，也叫容器“高度折叠” */
/* 这里使用一个新的元素：BFC */
/* BFC ：是html页面中的一个独立王国，有权接管内部的全部元素，
当然也包含了“浮动元素” */
/* BFC ：块级格式化上下文 */
/* BFC特征1：能够包含住浮动元素 */
.container {
/* overflow:是一个除了visible之外任何值，都会创建一个BFC */
overflow: hidden;
}

效果图

BFC的特征2：不会在垂直方向产生外边距的折叠

代码主体
`<body>
<div class="container">
</div>
</body>`

<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>

样式代码
`<style>

{
</style>`

/* 转为ie盒子 */
box-sizing: border-box;
}
.container {
/* 虚线 */
border: 5px dashed;
border-top-color: red;
border-bottom-color: green;
}
.container > .box {
color: #000;
width: 10em;
height: 5em;
background-color: gold;
border: 2px solid;
/* 设置浮动 */
float: left;
}
/* BFC特征2: 不会在垂直方向上产生外边距的折叠 */
.box.box1 {
float: none;
margin-bottom: 1em;
overflow: auto;
}
.box.box2 {
float: none;
margin-top: 2em;
overflow: auto;
}

效果图1

BFC的特征三：不会与外部的浮动元素重叠

代码主体
`<body>
<div class="container">
</div>
</body>`

<img src="https://img.php.cn/upload/course/000/000/001/5f72d73a23372909.png" alt="">
<p>
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。
BFC的三个特征：1. 能够包含浮动元素。
</p>

样式代码
`<style>

{
</style>`

/* 转为ie盒子 */
box-sizing: border-box;
}
.container {
/* 虚线 */
border: 5px dashed;
border-top-color: red;
border-bottom-color: green;
}
/* BFC特征3：BFC 不会与外部的浮动元素重叠 */
.container img {
margin: 1em;
float: left;
}
.container p {
overflow: hidden;
}

效果图

BFC属性的总结:

1. overflow: hidden / auto /scroll, 不能是visible;
2. display:flex; display:grid;
3. position:absolute / fixed;
4. float:left / right , 不能 none;

flex容器常用的四个属性

flex

1. 术语

容器: 具有display:flex属性元素
项目: flex 容器的”子元素”
主轴: 项目排列的轴线
交叉轴: 与主轴垂直的轴线

2. 容器属性

序号	属性	描述
1	`flex-flow`	主轴方向与换行方式
2	`justify-content`	项目在主轴上的对齐方式
3	`align-items`	项目在交叉轴上的对齐方式
4	`align-content`	项目在多行容器中的对齐方式

3. 项目属性

序号	属性	描述
1	`flex`	项目的缩放比例与基准宽度
3	`align-self`	单个项目在交叉轴上的对齐方式
4	`order`	项目在主轴上排列顺序

案例1:flex-flow

代码块
主体
`<body>
<div class="container">
</div>
</body>`

<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>

样式代码
`<style>
</style>`

* {
box-sizing: border-box;
}
/* 弹性容器与项目的基础样式 */
.container {
height: 20em;
border: 2px solid aqua;
padding: 2em;
margin: 2em;
display: flex;
}
.container > .item {
width: 8em;
background-color: gold;
border: 2px solid #000;
}
/* flex-flow: 是主轴方向的换行方式 */
/* 主轴方向：row / column /row-reverse /column-reverse */
/* 换行方式：不换行：nowrap。换行：wrap */
/* 1. 在单行容器中 */
.container {
/* 这是默认值，不写也可以 */
flex-flow: row nowrap;
}
/* 2. 多行容器 */
.container {
/* 垂直主轴换行 */
flex-flow: row wrap;
}
/* 改变主轴方向 */
.container {
/* 在主轴水平排列不换行 */
flex-flow: column nowrap;
/* 在主轴水平排列换行 */
flex-flow: column wrap;
height: 10em;
/* 在主轴上水平反向排列 ,靠右边显示*/
flex-flow: column wrap-reverse;
}

效果图

案例2：项目在主轴的对齐方式justify-content

代码块
主体
`<body>
<div class="container">
</div>
</body>`

<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>

样式代码
`<style>

{
</style>`

box-sizing: border-box;
}
/* 设置弹性容器与项目的基础样式 */
.container {
height: 20em;
border: 2px solid;
padding: 2em;
margin: 2em;
display: flex;
}
.container > .item {
width: 5em;
background-color: gold;
border: 2px solid;
}
/* 项目在主轴上的对齐方式 */
/* 本质上就是将主轴的剩余空间在项目中进行分配 */
.container {
/* 默认值 */
flex-flow: row nowrap;
/* 在水平不换行排列 */
flex-flow: column nowrap;
/* 1.将所有项目视为一个整体 */
/* . 紧贴起始线排列 */
justify-content: flex-start;
/* 紧贴终止线排列 */
justify-content: flex-end;
/* 紧贴中间线 */
justify-content: center;
/* 2. 将每一个项目视为一个独立的个体 */
/* 两端对齐：剩余空间在“除了首尾项目之外”的每个项目之间进行平均分配 */
justify-content: space-between;
/* 分散对齐：剩余空间在每个项目两侧进行平均分配 */
justify-content: space-around;
/* 平均对齐：剩余空间在每个项目之间进行平均分配 */
justify-content: space-evenly;
}

效果图

案例3：项目在交叉轴的对齐方式 align-items

代码块
主体
`<body>
<div class="container">
</div>
</body>`

<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>

样式代码
<style>

{
/ 项目在交叉轴上的对齐方式 /
.container {
}
</style>`

box-sizing: border-box;
}
/* 设置弹性容器与项目的基础样式 */
.container {
height: 20em;
border: 2px solid;
padding: 2em;
margin: 2em;
display: flex;
}
.container > .item {
width: 5em;
background-color: gold;
border: 2px solid;
}

flex-flow: row nowrap;
/* 默认会充满单行容器的高度 */
align-items: stretch;
/* 紧贴起始线 */
align-items: flex-start;
/* 紧贴终止线 */
align-items: flex-end;
/* 紧贴中间线 */
align-items: center;

效果图

案例4：

代码块
`<body>
<div class="container">
</div>`

<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
<div class="item">项目7</div>
<div class="item">项目8</div>
<div class="item">项目9</div>
<div class="item">项目10</div>
<div class="item">项目11</div>
<div class="item">项目12</div>

样式代码
`<style>

* {
box-sizing: border-box;
}
/* 弹性容器与项目的基础样式 */
.container {
height: 20em;
border: 2px solid;
padding: 2em;
margin: 2em;
display: flex;
}
.container > .item {
width: 5em;
background-color: gold;
border: 2px solid;
}
/* 生成多行容器 */
.container {
/* 换行 */
flex-flow: row wrap;
/* align-content: 控制项目在交叉轴上每一行的间隙; */
/* 默认充满容器高度 */
align-content: stretch;
/* 起始线排列 */
align-content: flex-start;
/* 终止线排列 */
align-content: flex-end;
/* 中间线 */
align-content: center;

        /* 两端对齐对齐 */        align-content: space-around;        /* 分散对齐 */        align-content: space-between;        /* 平均对齐 */        align-content: space-evenly;    }</style>`

效果图

flex属性的总结：

    1. flex-flow: 设置主轴方向和项目在主轴的换行方式    2. justify-content: 项目在主轴的对齐方式    3. align-items: 项目在交叉轴上的对齐方式    4. align-content：设置项目在多行容器中的对齐方式

了解BFC的三个特征，flex常用的四个属性演示

BFC

BFC是什么？

BFC的特征1：包含住浮动元素

BFC的特征2：不会在垂直方向产生外边距的折叠

BFC的特征三：不会与外部的浮动元素重叠

flex容器常用的四个属性

flex

1. 术语

2. 容器属性

3. 项目属性

案例1:flex-flow

案例2：项目在主轴的对齐方式justify-content

案例3：项目在交叉轴的对齐方式 align-items

案例4：

flex属性的总结：