一、BFC简介

BFC全称：Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则

  （可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）

二、BFC的触发条件（只要元素满足下面任一条件即可触发 BFC 特性）

  1. body 根元素；
  2. 浮动元素：float 不为none的属性值；
  3. 绝对定位元素：position (absolute、fixed)；
  4. display为： inline-block、table-cell、flex；
  5. overflow 除了visible以外的值 (hidden、auto、scroll)；

三、BFC的布局规则

<1> 内部的盒子会在垂直方向，一个个地放置；
<2> BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
<3> 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ；
<4> 计算BFC的高度时，浮动元素也参与计算
<5> 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
<6> BFC的区域不会与float重叠；

四、BFC的应用

<1>解决margin重叠问题
<2>解决浮动高度塌陷问题
<3>解决侵占浮动元素的问题

五、解决方法（代码和效果图）

<1>解决margin重叠问题
代码如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>解决margin重叠</title>

        <link rel="stylesheet" href="index.css"/>

    </head>

    <body>

        <div class="one"></div>

        <div class="box">

            <div class="two"></div>

        </div>

        <div class="three"></div>

    </body>

</html>

body{

    margin:0 auto;

}

.box{

    overflow:hidden;

}

.one{

    height:50px;

    background-color:red;

    margin:20px 0;

}

.two{

    height:50px;

    background-color:red;

    margin:20px 0;

}

.three{

    height:50px;

    background-color:red;

    margin:20px 0;

}

效果图如下：

（若将box中的overflow:hiddden;去掉的话第二个div的margin就会和上下俩个div的margin重叠）
<2>解决浮动高度塌陷问题
代码如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>解决父元素高度塌陷</title>

        <link rel="stylesheet" href="index4.css"/>

    </head>

    <body>

        <div class="box">

            <div class="one"></div>

            <div class="two"></div>

        </div>

    </body>

</html>

body{

    margin:0 auto;

}

.box{

    overflow:hidden;

    width:500px;

    background-color:yellow;

    margin:0 auto;

}

.one{

    height:50px;

    width:100px;

    background-color:red;

    float:left;

}

.two{

    height:100px;

    width:200px;

    background-color:blue;

    float:right;

}

效果图如下：
图片描述

（不给父元素overflow:hiddden;的话由于父元素没高而子元素也由于浮动不能撑起父元素 ，父元素就会塌陷）
<3>解决侵占浮动元素的问题
代码如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>解决侵占浮动元素的问题</title>

        <link rel="stylesheet" href="index5.css"/>

    </head>

    <body>

        <div class="box">

            <div class="one"></div>

            <div class="two">

                akehfakwehfaie<br/>

                akehfakwehfaie<br/>

                akehfakwehfaie<br/>

                akehfakwehfaie<br/>

                akehfakwehfaie<br/>

                akehfakwehfaie<br/>

            </div>

        </div>

    </body>

</html>

body{

    margin:0 auto;

}

.box{

    overflow:hidden;

    width:700px;

    background-color:yellow;

    margin:0 auto;

}

.one{

    height:100px;

    width:150px;

    background-color:red;

    float:left;

}

.two{

    height:170px;

    background-color:blue;

    /* float:left; */

    overflow:hidden;

}


（这里是将红色div左浮给蓝色的divoverflow：hidden；蓝色的就不会被红色的挡住

注意要给父元素divoverflow：hidden；否则当蓝色框内容少时父元素会和蓝色div一起变化）

Css里的BFC的更多相关文章

  1. 浅析CSS里的 BFC 和 IFC

    前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白 ...

  2. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  3. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  4. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  5. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

  6. CSS里的pointer-events属性

    现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清.比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框.而本文要说的pointer-ev ...

  7. CSS里的 no-repeat 是什么意思

    CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复 ...

  8. 【演示】在CSS里用calc进行计算

    请阅读 在CSS里用calc进行计算   下面的元素的width,padding,margin都使用了CSS calc进行计算. 简单计算: 100% – 100px 这是经过简单计算的元素宽度 复杂 ...

  9. 使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

随机推荐

  1. RDD(四)——transformation_key_value类型

    这里所有算子均只适用于pairRDD.pairRDD的数据类型是(k,v)形式的键值对: PartitionBy(Partitioner) 对pairRDD进行分区操作,如果原有的partioner和 ...

  2. Do jobs|permanent|secure job|Move|Look after|provide sb with sth|Move|Enjoy a good time|Learn about|Be fond of|Have a clearer idea|String quarter|Be subject to|A has little with B|Pigment

    Do jobs|work jobs Long-terms|permanent Gain jobs/secure job Move|go to |stay in |live in|settle down ...

  3. python中安装surprise中出现error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools":

    pip安装 安装之前要先进行numpy的安装 pip install numpy pip install surprise 安装出错: 安装surprise需要Microsoft visual c++ ...

  4. [LC] 47. Permutations II

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  5. WebService如何根据WSDL文件转换成本地的C#类

    WebService有两种使用方式,一种是直接通过添加服务引用,另一种则是通过WSDL生成. 添加服务引用大家基本都用过,这里就不讲解了. 那么,既然有直接引用的方式,为什么还要通过WSDL生成呢? ...

  6. numpy中的ndarray与pandas中的series、dataframe的转换

    一个ndarray是一个多维同类数据容器.每一个数组有一个dtype属性,用来描述数组的数据类型. Series是一种一维数组型对象,包含了一个值序列,并且包含了数据标签----索引(index). ...

  7. HDU-6312-Game

    题意: 一个集合里有1到n,两个人轮流从中取数,取出一个数的同时这个数的因子也被取走.取走最后一个数者为胜.判断是否先手必胜. 思路: 一道挺有意思的博弈题.一开始在纸上列出了n为1到6的情况,发现都 ...

  8. 2015-09-14-初级vector

    标准库vector类型 #include<vector> using std::vector; vector为一个类模板. vector的初始化 vector<T> v1; v ...

  9. 使用junit测试springMVC项目提示ServletContext找不到定义错误

    原文链接:https://blog.csdn.net/liu_gan/article/details/78400627 @RunWith(SpringJUnit4ClassRunner.class) ...

  10. SpringMVC学习笔记九:拦截器及拦截器的简单实用

    SpringMVC中的interceptor拦截器是非常重要的,它的主要作用就是拦截指定的用户请求,并进行相应的预处理和后处理. 拦截时间点在"处理器映射器根据用户提交的请求映射出所要执行的 ...