谈一谈自己对BFC的理解

2024-04-11 17:32

文章标签 理解 bfc 谈一谈

本文主要是介绍谈一谈自己对BFC的理解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、BFC概念

BFC全名为块级格式化上下文，它是一个独立的渲染区域，其内部的盒子如何布局只遵循块级格式化上下文的规则，不受外部元素的干扰

二、如何定义BFC

当前元素的float属性不为none
当前元素的position属性不为static和relative
当前元素的overflow属性不为visible
当前元素的display属性是inline-block、table-cell、flex、table-caption和inline-flex

三、BFC的布局规则

每个盒子都占一行，在垂直方向上放置（普通文档流布局也是）
同一个BFC中，盒子垂直方向的margin会重叠（普通文档流布局也会，但是如果一个是BFC，另一个不是就可以避免重叠）
BFC区域不会与float Box重叠（普通文档流布局是会覆盖浮动元素的位置）
BFC就是页面上独立的一个容器，容器里面的元素不会影响到元素外面的元素
对于BFC来说，其高度的计算是把float算在里面的（普通文档流布局是不会被父级计算的）
对于BFC来说，margin不会传递给父级，但是普通文档流会将margin传递给父级

四、对于布局规则的解释

同一个BFC中，盒子垂直方向的margin会重叠（普通文档流布局也会，但是如果一个是BFC，另一个不是就可以避免重叠）

    
<!DOCTYPE html>
<html lang="en">
<style>* {margin: 0;padding: 0;}.top, .center {width: 100px;height: 100px;}.top {background-color: aqua;margin-bottom: 10px;}.center {background-color: bisque;margin-top: 10px;display: inline-block;}
</style>
<body><div class="top"><div></div></div>
</body>
</html>

BFC区域不会与float Box重叠（普通文档流布局是会覆盖浮动元素的位置）

①普通文档流

<!DOCTYPE html>
<html lang="en">
<style>* {margin: 0;padding: 0;}.top {width: 100px;height: 100px;background-color: aqua;float: left;}.center {width: 500px;height: 500px;background-color:blue;}
</style>
<body><div class="top"></div><div class="center"></div>
</body>
</html>

效果图：后面那个box会覆盖上一个浮动的box

②BFC布局

<!DOCTYPE html>
<html lang="en">
<style>* {margin: 0;padding: 0;}.top {width: 100px;height: 100px;background-color: aqua;float: left;}.center {width: 500px;height: 500px;overflow: hidden;background-color:blue;}
</style>
<body><div class="top"></div><div class="center"></div>
</body>
</html>

效果图：第二个box会将第一个float的box覆盖

对于BFC来说，其高度的计算是把float算在里面的（普通文档流布局是不会被父级计算的）

①普通文档流

<!DOCTYPE html>
<html lang="en">
<style>* {margin: 0;padding: 0;}.father {width: 500px;background-color: black;/* overflow: hidden; */}.child {width: 100px;height: 100px;background-color: aqua;float: left;margin: 10px;}
</style>
<body><div class="father"><div class="child"></div><div class="child"></div></div>
</body>
</html>

效果图：father这个box不会有高度

②BFC布局：father的高度会把子元素float box的高度计算进去

与上的唯一区别是 father添加overflow: hidden

对于BFC来说，margin不会传递给父级，但是普通文档流会将margin传递给父级

①普通文档流：center的父级的盒子的margin不会向上传递，center_father的高度和center的height相同

<!DOCTYPE html>
<html lang="en">
<style>* {margin: 0;padding: 0;}.top {width: 100px;height: 100px;background-color: aqua;margin-bottom: 10px;}.center_father {background-color: blueviolet;}.center {width: 500px;margin-top: 10px;height: 500px;background-color:blue;}
</style>
<body><div class="top"></div><div class="center_father"><div class="center"></div></div>
</body>
</html>

效果图：

②BFC布局下margin会传递

<!DOCTYPE html>
<html lang="en">
<style>* {margin: 0;padding: 0;}.top {width: 100px;height: 100px;background-color: aqua;margin-bottom: 10px;}.center_father {overflow: hidden;background-color: blueviolet;}.center {width: 500px;margin-top: 10px;height: 500px;background-color:blue;}
</style>
<body><div class="top"></div><div class="center_father"><div class="center"></div></div>
</body>
</html>

效果图：