BFC

_阿狗
215 阅读2分钟

一、 BFC是什么

- block format context ，块级格式化上下文。

- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。

二、BFC的特性

1. 内部的box在垂直方向上会一个接一个的放置。

2. 由垂直方向上由margin决定，但是同时属于同一个bfc区域下的两个相邻的box盒子之间的margin会重叠，以大的margin为准。

3. 每个元素的左边外边距会和包含块的左边界想接触（bfc中元素不会超出）但是absolute定位是特例 绝对定位。

4. bfc区域不会和float元素重叠。

5. 当计算高度时，浮动子元素也需要进行计算。

6. bfc就是一个独立隔离的容器，里面的子元素不会影响另外一个bfc的内容。

三、如何生成BFC

1. 根元素（默认情况下只有根元素，即body一个块级上下文）。

2. 浮动元素，float 除 none 以外的值。

3. 定位元素，position为absolute，fixed。

4. display 为 inline-block，table-cell，table-caption其中之一。

5. overflow 为hidden，auto，scroll。

四、使用BFC解决问题

1. 利用BFC避免margi重叠。

- 这是没有使用BFC导致的重叠时的样子

image.png

image.png

- 这是使用BFC之后的代码和效果

image.png

<!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>防止margin重叠</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: paleturquoise;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
overflow: hidden;
}
</style>
<body>
<p>盒子一</p>
<div><p>盒子二</p></div>
</body>
</html>

2. 自适应两栏布局

- 每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

image.png

<!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>自适应两栏布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }

    .left {
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }

    .right {
        height: 300px;
        background: paleturquoise;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

- 因为BFC的区域不会与float box重叠，所以我们让right单独成为一个BFC。

image.png

<!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>自适应两栏布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
    }

    .left {
        width: 300px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;

    }

    .right {
        height: 300px;
        background: paleturquoise;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
        overflow: hidden;
    }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

3. 清楚浮动

- 当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。

image.png

<!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>清除浮动</title>
</head>
<style>
    .top {
        border: 5px solid black;
        width: 300px;
    }

    .box {
        border: 5px solid yellowgreen;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="top">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

- 因为计算BFC的高度时，浮动元素也参与计算，所以我们给父节点添加BFC

image.png

<!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>清除浮动</title>
</head>
<style>
    .top {
        border: 5px solid black;
        width: 300px;
        overflow: hidden;
    }

    .box {
        border: 5px solid yellowgreen;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="top">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

五、BFC总结

- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

- 因为BFC内部的元素和外部的元素绝对不会互相影响，所以当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠。

avatar
文章
阅读
粉丝