CSS之BFC详解

最新推荐文章于 2024-08-25 15:21:31 发布

自豪听我的

最新推荐文章于 2024-08-25 15:21:31 发布

阅读量127

点赞数

分类专栏： css常见问题文章标签： css css3

本文链接：https://blog.csdn.net/xyy_x_xyy/article/details/116033974

版权

css常见问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是BFC？

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

BFC布局规则

内部的Box会在垂直方向，一个接一个的放置
Box的垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box会重叠
BFC的区域不会与float box重叠（定位情况除外）
计算BFC的高度时，浮动元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

如何创建BFC？

float的值不是none;(就是让父盒子浮动起来)
position的值不是static或者relative
display:inline-block
overflow:hidden;

创建BFC的作用

BFC可以取消盒子的margin塌陷（margin塌陷为两个盒子互相使用上下margin的话，距离小的一方没有效果）
避免浮动元素和其他元素重叠

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 100px;
        float: left;
        background: green;
        color:white;
    }
 
    .right {
        height: 200px;
        background: orange;
        color:white;
    }
</style>
<body>
    <div class="left">左部</div>
    <div class="right">右部</div>
</body>
</html>

在这里插入图片描述

又因为：
BFC的区域不会与float box重叠。所以我们让right单独成为一个BFC以下使用了四种方法

      1.overflow: hidden;
     2.   /* float: left; */
	  3. /* position: absolute;
		left: 100px; */
	4./* display: inline-block; */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 100px;
        float: left;
        background: green;
        color:white;
    }
 
    .right {
		     overflow: hidden;
		        /* float: left; */
			   /* position: absolute;
				left: 100px; */
				/* display: inline-block; */
        height: 200px;
        background: orange;
        color:white;
    }
</style>
<body>
    <div class="left">左部</div>
    <div class="right">右部</div>
</body>
</html>

在这里插入图片描述

清除内部浮动

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷（就是将content部分给覆盖了），这个时候我们就要清楚浮动。

<!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>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

在这里插入图片描述

将父盒子单独创建BFC，同样以下代码分别有四种方法创建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>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
	     overflow: hidden;
	        /* float: left; */
		   /* position: absolute; */
			/* display: inline-block; */
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>