BFC_两列布局

Posted 2020-12-18 liuqyu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BFC_两列布局相关的知识，希望对你有一定的参考价值。

BFC布局规则2：BFC不会与float box重叠

当overflow不为visible时会生成BFC

布局结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>两列布局</title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            body{
                min-width: 600px;
            }
            .left{
                width:200px;
                height: 200px;
                background: black;
                float:left;
                opacity: 0.3;/*测试使用*/
                
            }
            .right{
                height: 200px;
                background: greenyellow;
            }
            
        </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>
</html>

当左侧增加了透明后，会发现左侧遮住了右侧同等大小

技术图片

解决方案，在右侧添加overflow：hidden，开启BFC

.right{
                height: 200px;
                background: greenyellow;
                overflow: hidden;/*开启了BFC,overflow不为visible时,生成BFC.*/
            }

以上是关于BFC_两列布局的主要内容，如果未能解决你的问题，请参考以下文章

BFC 块级格式上下文的定义创建特点和常见用途

css的布局及图形展示--三角形圆形半圆等面试点