BFC之浅析篇

BFC是什么呢?

掏粪男孩?

当然不是咯。BFC,英文名Block formatting context,直译为“块级格式化上下文”。它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进行定位,以及与其他元素的关系和相互作用。下表就是成为BFC元素后的特性以及如何成为BFC。


BFC(参考W3C)


特性


进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,那么该元素就成为了一个隔离的独立容器,BFC的区域不会与外部浮动元素重叠,且在同一个BFC内的两个相邻块级元素的外边距会重叠,但不同 BFC外边距不会重叠;在计算BFC高度时,将它内部的浮动元素也包含在内。

总之,BFC与外部元素互不影响


触发BFC的方法


1、  根元素

2、  float属性不为none

3、  position为absolute或fixed

4、  overflow的值不为visible

5、  display的值为table-cell,table-caption,inline-block中的任何一个。

谈了半天,你可能会问,咦,葛葛,那使元素成为BFC到底有么子用呢?

这就得,从它的特性入手,特别是我加粗的部分,可以知道,BFC元素可以防止与浮动元素重叠嘛。

恩?什么意思。看看下面的demo

<!DOCTYPE html>
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
             .leftDiv {
                 width:100px;
                 height:100px;
                 background:green;
                 float:left;
             }
             .normalDiv {
                 height:100px;
                 background:pink;
             }
        </style>
    </head>
    <body>
        <div class="leftDiv"></div>
        <div class="normalDiv"></div>
    </body>
</html>

运行代码,打开chrome调试器,点击normalDiv元素,可以看到,normalDiv有一部分被floatDiv挡住了,即它们发生了重叠。

那么我们触发normalDiv为BFC呢。例如设置它的属性overflow为hidden,我们运行代码,再看看结果。

<!DOCTYPE html>
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
             .leftDiv {
                 width:100px;
                 height:100px;
                 background:green;
                 float:left;
             }
             .normalDiv {
                 height:100px;
                 background:pink;
                 /*添加overflow:hidden*/
                 overflow:hidden;
             }
        </style>
    </head>
    <body>
        <div class="leftDiv"></div>
        <div class="normalDiv"></div>
    </body>
</html>

从运行结果可以看出,当我们触发normalDiv为BFC后,它与floatDiv就没有发生重叠啦。

好吧,咦,我也知道BFC的确可以防止与浮动元素重叠,那有什么用呢?

自适应布局!!!(下篇详讲)



从它的特性入手,我们还可以知道BFC可以阻止外边距重合

我们都知道,块级元素垂直方向的margin是会重合,例如这样

<!DOCTYPE html>
    <head>
        <title>test_slice</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            .div1,.div2 {
                width:100px;
                height:100px;
                margin:20px;
            }
            .div1 {
                background:green;
            }
            .div2 {
                background:pink;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>

从上面的运行结果(红色区域)可以知道,它们垂直方向的margin重叠了。

原因是因为,它们属于同一个BFC(根元素),外边距是会重叠滴。所以只要将它们其中一个属于另一个BFC,就可以啦。

代码和demo见下:

<!DOCTYPE html>
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            .div1,.div2 {
                width:100px;
                height:100px;
                margin:20px;
            }
            .anotherBFC {
                display:table-cell;
            }
            .div1 {
                background:green;
            }
            .div2 {
                background:pink;
            }
        </style>
    </head>
    <body>
        <div class="anotherBFC">
            <div class="div1"></div>
        </div>
        <div class="div2"></div>
    </body>
</html>

运行代码,发现的确如此。



从它的特性入手,我们还可以知道BFC可以清楚浮动。以前我知道解决“塌陷”问题的方法中,可以在父元素中加入overflow:hidden,就可以使父元素将浮动元素包裹起来,且清楚浮动,但不知道原因,后来才知道原来它将父元素BFC了,所以在计算父元素高度时,将浮动元素计算在内,又由于BFC不影响外部元素,所以就清楚浮动咯。

这是没有将父元素BFC的运行效果图

<!DOCTYPE html>
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

这是将父元素BFC后的运行效果图

<!DOCTYPE html>
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
                /*添加overflow:hidden*/
                overflow:hidden;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

哈,的确如此哦。

看来善于触发元素BFC,好处多多呀。

时间: 2024-10-18 23:23:53

BFC之浅析篇的相关文章

小程序入门(2)浅析篇

有了小程序入门(0)项目创建篇 || 小程序入门(1)项目结构篇.的基础. 一个页面是由 js 与 wxml和wxss配合形成的,而需要将页面显示出来需要在app.json中配置. 现在我们先来看一下决定页面布局的 wxml 的一些简单使用. 最简单的演示: 一个按钮就出现在了调试界面,(需要先保存 ctrl + s ,在去调试页面点击重启.) 按照这个思路我们有很多控件需要进行深入. 现在来看一下wxml与wxss的配合. 先看效果图: 在来看怎么实现, wxml  ,class为关联wxss

CSS marging浅析

一.margin可以为负值 在盒模型中,内容区的width/height.padding.border都不能为负值,但是margin例外,它可以为负值. 关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局. 此demo与CSS float浅析篇中的是同一个. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&quo

小程序入门(1)项目结构篇。

项目结构 小程序入门(0)项目创建篇 , 下载开发工具并创建项目. 小程序入门(2)浅析篇 ,了解wxml与wxss的配合使用 小程序进阶(1)豆瓣电影,看文档,复制文档代码基础布局也可以轻松搭建. 在编辑中找到加号!创建button目录. 添加一个外层文件button, 在四个内层文件 js,json , wxml , wxss . 名字与外层文件相同. 创建外层文件,分别在创建内层 js,json,wxml,wxss.这样就生成了一个伪页面,说它是伪页面到后面进行分析. . js:javas

小程序进阶(1)豆瓣电影_布局搭建

小程序入门(0)项目创建篇 小程序入门(1)项目结构篇 小程序入门(2)浅析篇 前篇概述: 有了前面三篇的铺垫,我们创建起了小程序项目,并粗浅的了解了小程序的外部项目结构,了解了 js,wxml,wxss都最基本运用,现在我们在进行循序渐进的深入探究,如何制作真实项目. 先看效果图: 分析步骤: 1.讲头部的视图滑动,简单 2.讲底部的导航栏,简单 3.讲中间的内容显示,中等 4.讲JS逻辑实现.复杂 难度等级的划分只局限于本文,不联系实际开发. 1.头部视图滑动,实例图: 准备工作先做好,创建

3.浮动问题解决方案

<style> .bar{ /*overflow:hidden;*/ /*BFC解决方案在没有position情况下使用:应为超出部分会隐藏*/ /*BFC参考第二篇随笔*/ border:1px solid blue; } .bar:after{ content:""; display:block; clear:both; } .bar{ zoom:1;  /*ie专有属性 清除浮动 ie6 ie7*/ } .child{ float:left; width:100px;

诗经 全文

诗经 全文 (带注释和译文) http://www.edu009.com/Article/HTML/Article_60756.html <诗经> 春秋·孔丘 <诗经>是我国第一部诗歌总集,先秦时代称为“诗”或“诗三百”,孔子加以了整理.汉武帝采纳董仲舒“罢黜百家,独尊儒术”的建议,尊“诗”为经典,定名为<诗经>. <诗经>现存诗歌 305 篇,包括西周初年到春秋中叶共 500 余年的民歌和朝庙乐章,分为风.雅.颂三章. “风”包括周南.召南.邶.鄘.卫.王

Android应用Preference相关及源码浅析(Preference组件家族篇)

1 前言 前一篇(点我阅读前一篇<Android应用Preference相关及源码浅析(SharePreferences篇)>)我们讨论分析使用了Android的SharePreferences,相信看过的朋友都有了自己的感悟与理解,这一篇我们继续乘热打铁来说说SharePreferences的衍生品--Preference组件. 其实Preference组件大家一定不陌生,因为Android系统的Setting应用及我们市面上一些符合Android设计思想的应用的设置界面一般都会用它来实现,

C# 程序性能提升篇-1、装箱和拆箱,枚举的ToString浅析

前景提要: 编写程序时,也许你不经意间,就不知不觉的使程序代码,发生了装箱和拆箱,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候,减少装箱和拆箱,是优化程序提高效率的一种途径.不仅跬步,无以至千里,不积小流,无以至江河.优化从点点滴滴做起. 一.装箱拆箱概念: 这里是官方定义:http://msdn.microsoft.com/zh-cn/library/yz2be5wk.aspx 装箱:值类型→引用类型 拆箱:引用类型→值类型 二.为什

cocos2dx基础篇(4)——浅析cocos2dx引擎目录

通过前面几节的学习,相信大家都已经配置好了VS+cocos2dx2.2.3的环境,并且成功运行了官方的案例HelloWorld. 一.窥探文件目录 要想学好cocos2dx,首先就需要对引擎目录下的各个文件有所了解.接下来,就让我们先来分析一下cocos2dx2.2.3引擎的文件目录吧. 从目录中我们主要了解一下一下几个文件: cocos2dx:cocos2d-x引擎的核心部分,存放了引擎的大部分源文件. CocosDenshion:声音模块相关源文件. Debug.win32:在Windows