前端BFC布局学习

zhangrxiang 发布于2019-08-02 10:54 / 565人阅读

摘要：按照我的理解是我们在某一条件下会触发布局，会产生一定的效果。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用。

BFC，全称为(Block formatting context)。按照我的理解是我们在某一条件下会触发BFC布局，会产生一定的效果。

Block Formatting Contexts翻译为：块级元素格式化上下文。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用。

其中块级元素可以理解为父级元素，内容即是子元素，子元素也为块元素，其他元素指的是与内容同级别的兄弟元素，相互作用指的是BFC里的元素与外面的元素不会发生影响。

而触发BFC的条件是：

1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、table-caption和inline-block之一
4、position的值不为static或者releative中任何一个

普通文档流的布局规则(一般像我这种新手没有布局意识的，就应该是普通文档流布局了。。。)

1、浮动的元素是不会被父级计算高度
2、非浮动元素会覆盖浮动元素的位置
3、margin会传递给父级
4、两个相邻的元素上下margin会重叠

BFC的布局规则

1、浮动的元素会被父级计算高度(父级触发了BFC)
2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）
3、margin不会传递给父级（父级触发了BFC）
4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个多带带的父级，然后让他的父级触发了BFC）

实例：



    

 

    hello1
    helloagain

 

    hello1
    helloagain




    hello1
    
        helloagain

GPU云服务器云服务器 bfc布局学习css布局 bfc 前端前端学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52632.html

前端BFC布局学习

摘要：按照我的理解是我们在某一条件下会触发布局，会产生一定的效果。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用。 BFC，全称为(Block formatting context)。按照我的理解是我们在某一条件下会触发BFC布局，会产生一定的效果。 Block Formatting Contexts翻译为：块级元素格式化上下文。它决定了块级元素如何对它的内容进行布局...

YFan 2019-08-30 15:54 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS中重要的BFC

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0
重学前端学习笔记（二十五）--CSS的正常流

摘要：一正常流的行为正常流的排版行为依次排列，排不下了换行。在正常流基础上，有相关规则，使得一些盒占据了正常流需要的空间，可以把理解为文字环绕。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联...

dcr309duan 2019-08-30 11:00 评论0 收藏0