css之bfc原理及应用

744 0 0

作者:过鹿人

1.css的布局技术有哪些？

正常布局流
display属性
弹性盒子
网格
浮动
定位
CSS 表格布局
多列布局

本文重点涉及到三种布局

正常布局流（normal flow）

正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。块盒独占一行，行盒水平依次排列

浮动（float）

把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动的元素周围环绕。

绝对定位（absolute positioning）

将元素完全从页面的正常布局流(normal layout flow)中移出，类似将它单独放在一个图层中，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

2.块级格式化上下文（BFC）简介

全称Block Formatting Context，简称BFC。它是一个独立的渲染区域，它规定了在该区域中，常规流块盒的布局。

什么叫常规流块盒？什么叫独立的渲染区域？

常规流块盒

常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素和定位元素

包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域，绝大部分的情况下：盒子的包含块，为其父元素的内容区域（content部分）

独立渲染区域

BFC渲染区域：

这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

根元素（html元素创建BFC区域，覆盖了网页中所有的元素）
浮动和绝对定位元素
overflow不等于visible的块盒

何为独立？
独立的渲染区域，就是在不同的BFC的区域，它们进行渲染时相互不干扰。创建BFC的元素，就隔绝了它内部和外部的联系，内部的渲染不会影响到外部。

触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

3.BFC规则以及应用

BFC具体规则：

创建BFC的元素，它的自动高度需要计算浮动元素
创建BFC的元素，它的边框不会与浮动元素重叠
创建BFC的元素，不会和他的子元素进行外边距合并

BFC的应用：

1.创建BFC的元素，它的自动高度需要计算浮动元素

例子：解决高度坍塌

在HTML中创建一个div类名为container 其子div有四个，类名为item，如下代码所示

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

css代码

    .container {
      background: green;
    }
    .container .item {
      border: 1px solid red;
      width: 100px;
      height: 100px;
      /* 子元素设置浮动 */
      float: left;
    }

效果如下图，出现高度坍塌，container 的高度为0

在我们以前，会使用到以下方法,使用清除浮动的伪元素clearfix::after.

html

给父级的类名添加 clearfix

    <div class="container clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

css

给container父元素添加伪元素样式.clearfix::after

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

效果图，就这样高度坍塌的问题解决了。其原理是创建了伪元素after 把高度撑开了。

创建BFC也能解决以上的问题，因为创建BFC的元素，它的自动高度需要计算浮动元素

浮动和绝对定位元素（这个方式会改变盒子的排列方式）
overflow不等于visible的块盒（跟以上方法相比，副作用最小）

最好还是使用伪元素来清除浮动，特别是在父盒子本身就需要溢出显示的情况下

实现代码

css

    .container {
      background: green;
      /* 触发bfc */
      /* position: absolute; */
      /* float: left; */
      overflow: hidden;
    }
    .container .item {
      border: 1px solid red;
      width: 100px;
      height: 100px;
      /* 设置浮动 */
      float: left;
    }

效果图，在父级container中创建了一个BFC ，解决了高度坍塌的问题。

2.创建BFC的元素，它的边框盒不会与浮动元素重叠

例子：

html

两个兄弟关系的div

<div class="float"></div>
<div class="container"></div>

css

    .float {
      width: 200px;
      height: 200px;
      background: green;
      /* 设置浮动 */
      float: left;
    }
    .container {      
　　　 height: 500px;
      background: red;
    }

效果图如下，两个兄弟关系的div出现了重叠的现象。因为常规流盒子看不到浮动元素，所以container会无视float

在第二个div container中加上overflow: hidden，使container 创建BFC，让常规流盒子的内部创建bfc，由于bfc的区域是独立渲染区域，所以肯定不会与其他区域产生干扰，所以就会避开浮动元素。

css

    .float {
      width: 200px;
      height: 200px;
      background: green;
      /* 设置浮动 */
      float: left;
    }
    .container {      
　　height: 500px;
      background: red;
     /* 触发bfc */
      overflow: hidden;
    }

tips: 这样的布局方式也是实现左边固定，右边自适应的两栏布局的方式

如图

3.创建BFC的元素，不会和他的子元素进行外边距合并

例子：创建两个div为父子关系

html

    <div class="container">
        <div class="child"></div>
    </div>

css

    .container {
      background: green;
      height: 500px;
      margin-top: 30px;
    }
    .container .child {
      height: 100px;
      margin: 50px;
      background: red;
    }

如图所示，我理想的情况是，父元素离body元素的margin-top是30px，子元素距离父元素的margin-top是50px，现在变f成了父元素和子元素都距离body元素的margin-top为50px，这显然是不符合预期的。原因是父子元素的外边距进行了合并

想要阻止父子元素的外边距进行合并，解决办法是在container中创建BFC，加上overFlow：hidden。

css

    .container {
      background: green;
      height: 500px;
      margin-top: 30px;
      /* 给父元素创建bfc */
      overflow: hidden;
    }
    .container .child {
      height: 100px;
      margin: 50px;
      background: red;
    }

效果如下，child 就会以containerBFC为准进行定位

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/zhengrongbaba/p/15059501.html

标签： HTML CSS HTML5 CSS3

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

css之bfc原理及应用