一天搞定CSS：BFC布局与普通文档流布局比较--15

你的名字 2022-06-16 08:57 196阅读 0赞

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

## **1.BFC定义** ##

> **它决定了块级元素如何对它的内容进行布局，以及与其它元素的关系和相互作用**
> 
> **关键词解释：**  
> 块级元素：父级（是一个块元素）
> 
> 内容：子元素（是一个块元素）
> 
> 其它元素：与内容同级别的兄弟元素
> 
> 相互作用：BFC里的元素与外面的元素不会发生影响

## **2.BFC触发方式** ##

![这里写图片描述][SouthEast]

## **2.BFC的布局规则** ##

![这里写图片描述][SouthEast 1]

## **3.普通文档流布局规则** ##

![这里写图片描述][SouthEast 2]

## **4.代码演示** ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            
    
            
            <div style="border: 1px solid #f00; display: inline-block;">
                <div style="width: 100px; height: 100px; background: green; float: left;">div1----</div>
            </div>
    
            
            <div style="border: 1px solid #f00; margin-top: 100px;">
                <div style="width: 100px; height: 100px; background: green; float: left;">kaivon1</div>
                <div style="width: 100px; height: 100px; background: red; overflow: hidden;">kaivon2</div>
            </div>
    
            
            <div style="background: blue; margin-top: 100px; overflow: hidden;">
                <div style="width: 100px; height: 100px; background: green; margin-top: 100px;">kaivon1</div>
                <div style="width: 100px; height: 100px; background: red;">kaivon2</div>
            </div>
    
            
            <div style="margin-top: 100px;">
                <div style="width: 100px; height: 100px; background: green; margin: 100px 0;">kaivon1</div>
                <div style="overflow: hidden;">
                    <div style="width: 100px; height: 100px; background: red; margin: 100px 0;">kaivon2</div>
                </div>
            </div>
        </body>
    </html>

**效果图：**

![这里写图片描述][SouthEast 3]

![这里写图片描述][SouthEast 4]

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

**链接地址：[http://blog.csdn.net/baidu\_37107022/article/details/71640304][http_blog.csdn.net_baidu_37107022_article_details_71640304]**

[SouthEast]: /images/20220616/a1ddef7ba2e942a7ab08c1f648285ff4.png
[SouthEast 1]: /images/20220616/c13737838d9b4da289392409fc887ea4.png
[SouthEast 2]: /images/20220616/f46180112fb04c6995fae1a6b86a3ed4.png
[SouthEast 3]: /images/20220616/aa8efd0ac3fd43768ea744a151749f75.png
[SouthEast 4]: /images/20220616/b961dede2c0e4e30a8327acb0307d23d.png
[http_blog.csdn.net_baidu_37107022_article_details_71640304]: http://blog.csdn.net/baidu_37107022/article/details/71640304