BFC原理及应用

最新推荐文章于 2020-10-10 17:53:14 发布

LiXSnow

最新推荐文章于 2020-10-10 17:53:14 发布

阅读量274

点赞数

分类专栏： web-css基础

本文链接：https://blog.csdn.net/lixsnow/article/details/85012338

版权

web-css基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原理：

BFC（Block Formatting Contexts）块级格式化上下文

是一个独立的渲染区域，并且有自己的一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
内部元素的布局方式不会影响到外部元素的布局，反之，同理

触发BFC的条件：

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC
position的值为absolute或fixed

BFC应用

解决外边距合并问题
自适应多栏布局
下面以两栏布局为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            margin: 100px auto;
        }
        .box img{
            float: left;
            width: 150px; /*当图片宽度变化后，BFC元素宽度自适应*/
        }
        .right-box{
            overflow: hidden; /*BFC 原理  消除外部浮动元素的影响*/
        }
        .right{
            height: 200px;
            background: #f00;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="11.JPG">
        <div class="right-box">
            <div class="right">了几分快捷键就爱看【盘联动开发计划</div>
        </div>
    </div>
</body>
</html>

清除浮动：给父元素设置overflow：hidden

LiXSnow

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC原理及应用

原理：BFC（Block Formatting Contexts）块级格式化上下文是一个独立的渲染区域，并且有自己的一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用内部元素的布局方式不会影响到外部元素的布局，反之，同理触发BFC的条件：根元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block、tab...
复制链接

扫一扫