CSS布局基础--BFC

1,什么是BFC

  BFC(Block Formatting Context)块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念,是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level box如何布局,并且这个区域与外部毫不想干,

2,生成BFC

  下面的方法可以创建一个新的BFC

  (1)浮动元素,float: left | right

  (2)绝对定位元素,position: absolute | fixed

  (3)块级元素以及块级容器(比如display: inline-block、table-cell、table-capation)

  (4)overflow值不为visible的块级盒子

3,BFC的主要应用

  (1)浮动元素的塌陷问题。BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。当一个元素中的子元素浮动了,这个父元素就会发生高度塌陷问题。如下代码所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .content {
            width: 100%;
            border: 2px solid #9acd32;
        }
        .content1{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            margin-left: 20px;
        }
        .content2{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
            margin-left: 20px;
        }
        .content3{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="content1"></div>
        <div class="content2"></div>
        <div class="content3"></div>
    </div>
</body>
</html>

  所以照成这种现象的原因就是浮动元素创建了一个新的BFC,成为了一个独立的容器,不会影响到外部的父元素,因此就会照成高度崩塌。知道了原因所在,我们就可以很自然的想到解决这种问题的通常的办法,为父元素设置overflow:hidden,这样父元素就生成一个新的BFC,将浮动的元素包含起来,从而成为一个独立容器。这样外面的元素不再受其浮动的影响,从而达到清除浮动的作用。

        .content {
            width: 100%;
            border: 2px solid #9acd32;
            overflow: hidden;
        }                

  

  (2)边距折叠问题。相邻两个盒子之间的垂直间距是被margin属性决定的,在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。照成这种问题的原因就是属于同一个BFC的关系(跟BFC)。只要我们让其不在同一个BFC就可以解决了。

原文地址:https://www.cnblogs.com/tianhaining/p/8179583.html

时间: 2024-10-07 22:41:21

CSS布局基础--BFC的相关文章

CSS布局基础

CSS布局基础 1.块区域介绍 1: <body> 2: <div> 3: <p>This is a pargraph.</p> 4: </div> 5: </body> p 元素的包含块是 div 元素,因为作为块级元素,表单元格或行内元素,这是最近的祖先元素,类似的,div的包含块是 body. 因此,p的布局依赖于 div的布局,而div的布局则依赖于 body的布局. 块级元素会自动重启一行. 2. 块级元素 正常流布局 一般

CSS 布局和 BFC

什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文).BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个 BFC 中

CSS布局基础汇总

常见布局种类 一列布局 两列布局 三列布局 CSS中的定位机制 网页简单布局之结构与表现的原则 CSS元素隐藏 CSS中清除浮动最优方法 DIVCSS规范命名集合 DIVCSS命名参考表 导入样式及脚本 传统方式 新规范 常见布局种类 一列布局 自上而下的,一般头部进行固定宽度,高度设置为自动 两列布局 自适应的两列布局:width用百分比+float: 固定宽度的两列布局:width:具体值/父级元素的宽度确定,width+百分比:+float; 如果没有加float的话,不能实现并排的两列布

div+css布局基础知识理解

牛腩新闻发布系统用到了很多的BS的技术,而我们看到的精美的网页很大一部分是由div+css技术实现的,div+css是一种网页布局方式.<div>是HTML的标签,它构成的是块级元素,在有它标记的内容的前后都会换行符,在web页面上表现为一个div元素的前后都会自动的换行.它可以将大的页面分解为多个部分.然后在css中可以分别的对这些部分进行样式的设置,而且和table布局相比div+css将内容和样式表现分离开. 要学习一样技术就要从掌握它的基础概念开始,就来看看在div+css中的基础概念

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

css布局中,什么是BFC

BFC的定义是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse). 在 Block Formatting Context 中,每一个元素

CSS布局中应用BFC的例子

BFC是啥? BFC(Block Formatting Context),“块状格式化上下文”.简单地说,它提供一个独立的布局环境.在同一个BFC中,盒子会一个挨一个地排列,margin边距还会在垂直方向上叠加.float和clear:float也只会在同一个BFC内有效. 产生BFC的情况有? W3C标准中这样描述:Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cel

认识和理解css布局中的BFC

认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Context 的元素的特点 其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性. 相邻的块级元素的垂直边距会折叠(collapse). 每一个元素左外边(margin)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边)

百度前端技术学院--零基础CSS布局

怎么预览 GitHub 项目里的网页? 一. 在项目源代码页面链接前缀那加上http://htmlpreview.github.com/?举个例子:需要打开的项目页面https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html给加上前缀http://htmlpreview.github.com/?最终链接http://htmlpreview.github.io/?https://github.com/aisinvon/