CSS定位之【BFC】

最新推荐文章于 2023-12-21 00:00:00 发布

1oneLee

最新推荐文章于 2023-12-21 00:00:00 发布

阅读量178

点赞数 2

分类专栏： CSS面试

本文链接：https://blog.csdn.net/qq_27575925/article/details/111473512

版权

CSS面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS定位之【BFC】

首先复习一下CSS的几种定位方式

普通流：由上至下，行内元素和块级元素按照自己的摆放规则水平或竖直排布，
浮动流：在普通流的基础上浮动偏移，一般是左右浮动
绝对定位流：整体脱离普通流，元素不占原来位置

📌而BFC属于普通流

初识BFC

块格式化上下文，是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。

我们可以把具有BFC的盒子看做一个隔离的独立容器，它改变内部的渲染方式，不会影响外面的布局。

如何触发BFC

在这里插入图片描述

引用B站up主 Libra121的视频 www.bilibili.com/video/BV1aZ…

BFC的作用

1. 解决外边距重叠的问题

当上下的两个盒子，他们的外边距margin都为50px，则两个盒子之间的间隔应该有100px

.demo{
	width: 50px;
	height: 50px;
	background-color: cyan;
	margin: 50px;
}

<div class="demo"></div>
<div class="demo"></div>

结果发现只有50px

在这里插入图片描述

这是CSS的规范，上外边距和下外边距会合并，数值为取最大值，所以两个50px合并成了一个50px。

💡解决方法：将两个盒子放在两个BFC中

.demo{
   width: 50px;
    height: 50px;
    background-color: cyan;
    margin: 50px;
}

.con{
    overflow: hidden;
}

<div class="con">
    <div class="demo"></div>
</div>

<div class="con">
    <div class="demo"></div>
</div>

放在两个con盒子中，把他们相互隔离开，给con盒子添加BFC属性overflow: hidden;

结果很明显在这里插入图片描述

2. 清除浮动

在学习浮动的时候我们都知道，给子元素设置浮动后，如果父元素没有给定高度，会脱离文档流，造成高度塌陷。

.demo{
    width: 50px;
    height: 50px;
    background-color: cyan;
    float: left;
}

.con{
    border: red solid 4px;
}

<div class="con">
    <div class="demo"></div>
</div>

在这里插入图片描述以前也有方法可以“清除浮动”

💡解决方法：父级元素使用BFC的方法

给父容器添加overflow: hidden;

.con{
    border: red solid 4px;
    overflow: hidden;
}

在这里插入图片描述

3. 阻止普通文档流元素被浮动元素覆盖

两个div盒子，都是普通流

.demo{
    width: 50px;
    height: 50px;
    background-color: cyan; 
}

.demo2{
    width: 150px;
    height: 150px;
    background-color: green;
}

<div class="demo"></div>
<div class="demo2"></div>

标准的一上一下在这里插入图片描述当我们把上面的小盒子设置浮动后

.demo{
    width: 50px;
    height: 50px;
    background-color: cyan;
    float: left;
}

.demo2{
    width: 150px;
    height: 150px;
    background-color: green;
}

在这里插入图片描述绿盒子挤上来了，但是它被浮动盒子遮住了

💡解决方法：我们触发正常元素的BFC属性，给被遮挡的普通盒子添加overflow: hidden;

.demo{
    width: 50px;
    height: 50px;
    background-color: cyan;
    float: left;
    
}

.demo2{
    width: 150px;
    height: 150px;
    background-color: green;
    overflow: hidden;     //这里添加
}

在这里插入图片描述

4. 自适应两栏布局

.float {
    width: 200px;
    height: 100px;
    float: left;
    background: red;

}

.main {
    background: green;
    height: 100px;
}

<div>
    <div class="float">
        浮动元素
    </div>
    <div class="main">
        自适应
    </div>
</div>

在这里插入图片描述
右侧的绿色盒子占满了一整行，红色盒子浮动了，所以会左侧的盒子改在了绿色盒子上方。可以在绿色盒子中加上：overflow：hidden，这样的话就会触发BFC。

 .float {
    width: 200px;
    height: 100px;
    float: left;
    background: red;

}

.main {
    background: green;
    height: 100px;
    overflow: hidden;
}
  </style>
</head>
<body>
<div>
    <div class="float">
        浮动元素
    </div>
    <div class="main">
        自适应
    </div>
</div>

在这里插入图片描述
缩小浏览器窗口的大小，左边盒子的尺寸是固定不变的。

可以看出，以上这几种情况，都是给普通流的元素添加BFC属性，让其触发BFC布局。也验证了开头那句，“BFC属于普通流”

1oneLee

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS定位之【BFC】

CSS定位之【BFC】首先复习一下CSS的几种定位方式普通流：由上至下，行内元素和块级元素按照自己的摆放规则水平或竖直排布，浮动流：在普通流的基础上浮动偏移，一般是左右浮动绝对定位流：整体脱离普通流，元素不占原来位置????而BFC属于普通流初识BFC块格式化上下文，是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。我们可以把具有BFC的盒子看做一个隔离的独立容器，它改变内部的渲染方式，不会影响外面的布局。如何触发BFC
复制链接

扫一扫

专栏目录