zoukankan      html  css  js  c++  java
  • BFC布局

    BFC(块级格式化上下文)

    是web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互区域。

    触发条件

    1. 根元素, 即HTML元素
    2. float的值不为none
    3. overflow的值不为visible
    4. display的值为inline-block, table-cell, table-caption
    5. position的值为absolute或fixed

    布局规则

    1. 内部的box会在垂直方向, 一个接一个地放置(这点就是我们常见到的块级元素占一行)
    2. box的垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的margin会发生重叠, 与方向无关(垂直方向上的margin重合也就是我们常说的“坍塌现象”)
    3. 每个元素的margin box的左边, 与包含border box的左边相接触(对于从左往右的格式化, 否则相反). 即使存在浮动也是如此
    4. BFC的区域不会与float box重叠
    5. BFC就是页面上的一个隔壁的独立容器, 容器里面的子元素不会影响到外面的元素. 反之也如此
    6. 计算BFC的高度时, 浮动元素也参与计算

    对比初学css时的规则

    1. block元素会扩展到与父元素同宽, 所以block元素会垂直排列
    2. 垂直方向上两个相邻的DIV margin重叠, 而水平方向上不会(这个说法就不完全正确)
    3. 浮动元素会接近左上方或右上方
    4. 为父元素设置overflow: hidden 或浮动元素, 则会包含浮动元素

    初学CSS规则背后更深层次的概念其实就是BFC布局规则

    作用

    1. 自适应的两栏布局
    2. 可以阻止元素被浮动元素覆盖
    3. 可以包含浮动元素——清除内部浮动
    4. 分属不同的BFC时可以阻止margin重叠

    通过BFC实现两栏布局

    1
    2
    3
    4
    5
    大专栏  BFC布局class="line">6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Document</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    .box {
    height: 100%;
    100%;
    }
    .left {
    float: left;
    height: 200px;
    background-color: aquamarine;
    300px;
    margin-right: 20px;
    }
    .right {
    height: 300px;
    background-color: blueviolet;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>
    </body>
    </html>
  • 相关阅读:
    MFC加载图片
    动态数组类
    MFC程序打包方法
    如何在C++中使用动态三维数组
    Ansys热应力计算
    像使用数据库一样使用xml
    过年回家的一点感想
    前后端框架和设计模式
    国外支付PayPal
    可重用的管理后台代码
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12433328.html
Copyright © 2011-2022 走看看