关于BFC和float的一些理解

最新推荐文章于 2023-10-25 17:09:17 发布

￡五年

最新推荐文章于 2023-10-25 17:09:17 发布

阅读量580

点赞数 1

分类专栏： CSS 文章标签： CSS BFC 为什么要清除浮动

本文链接：https://blog.csdn.net/weixin_39499923/article/details/97987743

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BFC

BFC是Block Formatting Context （块级格式化上下文）的缩写
我先说一下清除浮动问题。
我们都知道有时候要清除浮动，但为什么要清除浮动？
我们先看一下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" content="text/html">
    <title></title>
    <style type="text/css">
        .mydiv1{
            width: 100px;
            height: 150px;
            float: left;
            background:red;
            margin-left: 10px;
        }
        .mydiv2{
            width: 100px;
            height: 150px;
            background:green;
            float: left;
            margin-left: 10px;
        }
        .mydiv3{
            width: 100px;
            height: 150px;
            float: left;
            background-color:blue;
            margin-left: 10px;
        }
        .wdiv{
            border: 5px solid #000;
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="wdiv">
        <div class="mydiv1"></div>
        <div class="mydiv2"></div>
        <div class="mydiv3"></div>
    </div>
</body>
</html>

运行结果如图：
在这里插入图片描述
可以看到，黑色部分我并没有设置高度，但按理来说，应该是被子元素撑满（也就是自适应子元素的高度）,但事实并没有。
之所以会这样，是因为父容器并没有把浮动的子元素包裹起来，通常也叫塌陷

这时候我们就需要清除浮动了（好像讲的和BFC没关系，别急，在后面）
我们给父元素添加属性 （overflow:hidden;）
也就是：

.wdiv{
            border: 5px solid #000;
            width: 500px;
            overflow: hidden;
        }

然后我们再运行一下代码：
发现结果如图：
在这里插入图片描述没错，这就是我们想要的效果。
那么为什么会这样？
这就涉及到了BFC的知识：
当我们为父容器添加属性 overflow:hidden; 后，父容器生成BFC，有了BFC，在计算父容器高度时，父容器内的浮动元素也会被计算进去（我通俗理解成，假如父容器没有设置高度，变成BFC会用BFC的计算方式重新计算父元素高度）

那么什么情况下会创建BFC?
CSS规范说明了在下列这些情况下会创建新的BFC：
浮动元素（float: left | right）；
绝对定位元素（position: absolute | fixed）；
行内块元素（display: inline-block）；
表格的单元格（display: table-cells，TD、TH）；
表格的标题（display: table-captions，CAPTION）；
‘overflow’ 特性不为visible 的元素（除非该值已经传播到viewport?）；
表格元素创建的"匿名框"

注意，“display:table” 本身并不产生"BFC"。但是，它可以产生匿名框，其中包含"display:table-cell" 的框会产生块格式化上下文。总之，对于"display:table" 的元素，产生块格式化上下文的是匿名框而不是"display:table"
注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

最后：
因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

文章参考：https://www.cnblogs.com/chencyl/p/3948331.html

￡五年

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于BFC和float的一些理解

BFCBFC是Block Formatting Context （块级格式化上下文）的缩写我先说一下清除浮动问题。我们都知道有时候要清除浮动，但为什么要清除浮动？我们先看一下代码<!DOCTYPE html><html><head> <meta charset="utf-8" content="text/html"> &...
复制链接

扫一扫

专栏目录