BFC的表象认识

最新推荐文章于 2022-01-12 19:22:30 发布

weixin_30706691

最新推荐文章于 2022-01-12 19:22:30 发布

阅读量59

点赞数

原文链接：http://www.cnblogs.com/lyz1991/p/5625279.html

版权

首先字面翻译，这三个字母分别代表什么，box，formatting， context，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

形象点就是说一种规范，规范什么呢？规范盒子内部元素不会影响到外部元素，或者和一种布局上的规范；不明白 ok，谈谈清除浮动的方法里面，有个叫overflow为hidden，他的原理是啥呢？就是BFC；那些元素会产生BFC呢，官方定义如下：

float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

BFC的特性是啥呢？

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

但是这些特性有啥用啊？当然解决问题的了，解决啥问题呢？上面说了布局的问题，可能还有人不懂，来几个例子演示下

第一个例子：对应的第2个特性。

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<style>
    .test{
        overflow: hidden;
    }
    .div1{
        width: 100px;
        height: 100px;
        background-color: black;
        margin-bottom: 10px;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 10px;
    }

</style>
</head>
<body>


<div class="div1"></div>


<div class="div2"></div>

</body>
</html>

　　按常态思考，间距应该20px，其实不然这里是10px，怎么解决呢，各自生成独立BFC，为两个div各加一个父级并且父级overflow为hidden

第二个例子；关于第4个特性，代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<style>
    .div1{
        width: 100px;
        height: 100px;
        background-color: black;
        float: left;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: blue;
    }

</style>
</head>
<body>


<div class="div1"></div>


<div class="div2"></div>

</body>
</html>

根据第三个特性，得到结果是两个元素重叠了，那么咋解决呢，ok，div2加上overflow为hidden，这个时候也就是说div2成为一个独立的BFC,于是又遵循第三定理一次排放，

但是注意这里如果继续为div2添加margin的话，那么页面上的效果是只有当margin-left大于100时候才有作用，且效果是margin-left的效果，也说明实质上这里可能不是真正的不重叠效果，原有那个位置还在那儿

最后一个定理就是我们常用的overflow清楚浮动的原理了，因为overflow为hidden此时div变成一个BFC，于是遵循BFC定理，BFC内部元素计算高度是把浮动元素计算进去的从而达到清除浮动效果

转载于:https://www.cnblogs.com/lyz1991/p/5625279.html

weixin_30706691

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC的表象认识

首先字面翻译，这三个字母分别代表什么，box，formatting， context，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。形象点就是说一种规范，规范什么呢？规范盒子内部元素不会影响到外部元素，或者和一种布局上的规范；不明白 ok，谈谈清除浮动的方法里面，有个叫overflow为hidden，他的原理是啥呢？就是BFC；那些元素会产生BFC呢，官方定义如下：...
复制链接

扫一扫