css中的bfc怎么玩？

最新推荐文章于 2022-05-25 10:15:25 发布

u011263845

最新推荐文章于 2022-05-25 10:15:25 发布

阅读量647

点赞数

分类专栏：前端开胃菜 html5&&css3 文章标签：布局渲染模式 float

本文链接：https://blog.csdn.net/u011263845/article/details/47209905

版权

html5&&css3 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

前端开胃菜

26 篇文章 0 订阅

订阅专栏

首先弄明白一个概念，上面是bfc？
w3c是这样解释

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。

说通俗一点就是：
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .column{
            width: 31.33%;
            background-color: aqua;
            float: left;
            margin: 0.1%;
                        color: #fff;
            padding: 10px 0;
        }
        .column:last-child{
            float: none;
/*            overflow: hidden;*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">11</div>
        <div class="column">22</div>
        <div class="column">33</div>
    </div>
</body>
</html>

上面的代码添加了overflow：hidden所以会形成一个新的bfc模块。

理解了概念对于很多布局都追根问底，明白其中的原理，比如什么计算margin边距上下取大左右取大。什么左边头像右边文字之类的布局等等。

u011263845

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的bfc怎么玩？

首先弄明白一个概念，上面是bfc？ w3c是这样解释 BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。说通俗一点就是： float的值不为none position的值不为static或者relative display的值为 table-cell, table-caption, inline-block,
复制链接

扫一扫

专栏目录