zoukankan      html  css  js  c++  java
  • 一天搞定CSS:BFC布局与普通文档流布局比较--15

    BFC:Block Formatting Contexts–块级元素格式化上下文

    1.BFC定义

    它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用

    关键词解释:
    块级元素:父级(是一个块元素)

    内容:子元素(是一个块元素)

    其它元素:与内容同级别的兄弟元素

    相互作用:BFC里的元素与外面的元素不会发生影响

    2.BFC触发方式

    这里写图片描述

    2.BFC的布局规则

    这里写图片描述

    3.普通文档流布局规则

    这里写图片描述

    4.代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!--
                触发BFC的方式(以下任意一条就可以)
                    1、float的值不为none
                    2、overflow的值不为visible
                    3、display的值为table-cell、table-caption和inline-block之一
                    4、position的值不为static或者releative中任何一个
    
    
                普通文档流的布局规则
                    1、浮动的元素是不会被父级计算高度
                    2、非浮动元素会覆盖浮动元素的位置
                    3、margin会传递给父级
                    4、两个相邻的元素上下margin会重叠
    
                BFC的布局规则
                    1、浮动的元素会被父级计算高度(父级触发了BFC)
                    2、非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
                    3、margin不会传递给父级(父级触发了BFC)
                    4、两个相邻的元素上下margin不会重叠(给其中一个元素添加一个单独的父级,然后让他的父级触发了BFC)
            -->
    
            <!--
                1、浮动的元素会被父级计算高度(父级触发了BFC)    使用display不为none触发BFC
            -->
            <div style="border: 1px solid #f00; display: inline-block;">
                <div style=" 100px; height: 100px; background: green; float: left;">div1----</div>
            </div>
    
            <!--
                2、非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)  使用overflow不为visible触发BFC
            -->
            <div style="border: 1px solid #f00; margin-top: 100px;">
                <div style=" 100px; height: 100px; background: green; float: left;">kaivon1</div>
                <div style=" 100px; height: 100px; background: red; overflow: hidden;">kaivon2</div>
            </div>
    
            <!--
                3、margin不会传递给父级(父级触发了BFC)    使用overflow不为visible触发BFC    
            -->
            <div style="background: blue; margin-top: 100px; overflow: hidden;">
                <div style=" 100px; height: 100px; background: green; margin-top: 100px;">kaivon1</div>
                <div style=" 100px; height: 100px; background: red;">kaivon2</div>
            </div>
    
            <!--
                4、两个相邻的元素上下margin不会重叠(给其中一个元素添加一个单独的父级,然后让他的父级触发了BFC)  使用overflow不为visible触发BFC
            -->
            <div style="margin-top: 100px;">
                <div style=" 100px; height: 100px; background: green; margin: 100px 0;">kaivon1</div>
                <div style="overflow: hidden;">
                    <div style=" 100px; height: 100px; background: red; margin: 100px 0;">kaivon2</div>
                </div>
            </div>
        </body>
    </html>
    

    效果图:

    这里写图片描述

    这里写图片描述

    5.对于IE不支持BFC问题的处理,Layout布局

    链接地址:http://blog.csdn.net/baidu_37107022/article/details/71640304

  • 相关阅读:
    [翻译]Linux 内核里的数据结构 —— 基数树
    spring各版本下载地址
    两台机子的repcached Memcache 的安装与实验
    非root用户Memcached repcached安装
    VMVare 桥接上网
    JDBC executeBatch 抛出异常停止
    Ehcache jgroups方式同步缓存出现问题总结
    jquery $提示缺少对象$提示缺少对象
    Struts2标签遍历List<Map<String,String>>
    linux与windows回车换行符的区别
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853966.html
Copyright © 2011-2022 走看看