CSS块级格式化

最新推荐文章于 2024-04-19 00:20:20 发布

赛家薇

最新推荐文章于 2024-04-19 00:20:20 发布

阅读量70

点赞数

文章标签： css3 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_74899726/article/details/129168961

版权

CSS块级格式化

## 概念

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box(块级标签)参与，它规定了内部的Block-level Box(块级标签)如何布局，并且与这个区域外部毫不相干。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

#### 怎样生成**BFC**

- 根标签（html标签）

- float的值不为none

- overflow 的值不为 visible

- display 的值为 inline-block

- position 的值为 absolute 或 fixed

#### **BFC**的特性

1、内部的标签默认会在垂直方向上一个接一个的放置。

2、垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。

3、每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

4、BFC 的区域不会与 float 的标签区域重叠。

5、计算BFC的髙度时，浮动子标签也参与计算。

6、BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然。

#### BFC解决的问题

##### 1.清除浮动

原因：浮动会让其所在的父元素撑不起来高度

解决办法(特性5)：计算BFC的髙度时，浮动子标签也参与计算。

触发bfc的几个条件都可以用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap {

width: 400px;

/* height: 300px; */

background-color: pink;

/* 5、计算BFC的髙度时，浮动子标签也参与计算。 */

/* overflow: hidden;

overflow: scroll;

overflow: auto;

float: left;

float: right; */

/* display: inline-block; */

/* position: absolute; */

position: fixed;

}

.wrap div {

width: 100px;

height: 100px;

background-color: yellowgreen;

float: left;

}

.wrap .box2 {

background-color: tomato;

}

</style>

</head>

<body>

</div>

</body>

</html>

```

##### 2.兄弟塌陷

原因：垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠

解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面反之亦然

触发bfc只有overflow属性能用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box1,

.box2 {

width: 200px;

height: 200px;

}

.box1 {

background-color: tomato;

margin-bottom: 100px;

}

.box2 {

background-color: green;

margin-top: 100px;

margin-top: 200px;

}

/* 解决方法，给盒子套一个父盒子，加 overflow: hidden;*/

.father {

/* 触发bfc */

overflow: hidden;

overflow: scroll;

overflow: auto;

}

/* 解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面反之亦然 */

</style>

</head>

<body>

</div>

</div>

<!-- 兄弟关系外间距塌陷问题

现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；

两个值一样大，取当前值

两个值不同，取较大值

原因：并列关系的两个元素共用了一个外间距区域

解决办法：

分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden' -->

</body>

</html>

```

##### 3.防止字体环绕

原因：浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc除了（绝对，固定定位）属性其余都能用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap {

width: 700px;

height: 500px;

border: 2px solid red;

}

.wrap .box1 {

width: 200px;

height: 200px;

background: pink;

float: left;

}

.wrap .box2 {

width: 300px;

height: 200px;

background: yellowgreen;

/* 触发bfc */

/* float: left;

float: right; */

overflow: hidden;

overflow: scroll;

overflow: auto; */

display: inline-block;

/* 不能用 */

/* position: absolute;

position: fixed; */

}

</style>

</head>

<body>

<div class="box2">box23.防止字体环绕3.防环绕3.防环绕3.防止字体环绕</div>

<!-- 原因：浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠 -->

</div>

</body>

</html>

```

##### 4.两栏自适应

两栏自适应：左侧固定宽度右侧自适应的状态随着浏览器的窗口改变大小（左侧浮动，右侧触发BFC）

原因：浮动的标签提升层级会覆盖正常标签,脱离标准流不会脱离文本流

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc的条件触发bfc只有overflow属性能用

- 两栏自适应

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap .left {

width: 200px;

height: 300px;

background-color: red;

float: left;

}

.wrap .right {

height: 350px;

background-color: aquamarine;

/* 触发bfc */

overflow: hidden;

overflow: scroll;

overflow: auto;

/* 以下不能用 */

/* float: left;

float: right; */

/* display: inline-block; */

/* position: absolute;

position: fixed; */

}

</style>

</head>

<body>

<div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表</div>

</div>

</body>

</html>

```

赛家薇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS块级格式化

div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表-- 原因：浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。原因：浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。6、BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然。
复制链接

扫一扫