CSS实现经典三栏布局（两侧定宽，中间自适应）

最新推荐文章于 2023-06-27 10:45:57 发布

吃不胖的磊磊磊

最新推荐文章于 2023-06-27 10:45:57 发布

阅读量1k

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/u013853928/article/details/52988902

版权

html css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html代码:

<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
css代码:

    #left{
        float: left;
        width:100px;
        height: 100px;
        background-color: #00A5FF;
    }
    #right{
        float: right;
        width:100px;
        height:100px;
        background-color: #0000FF;
    }
    #middle{
        overflow: hidden;
        width:auto;
        height:150px;
        background-color: red;
    }

中间元素要创建一个BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：

float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

　　关于BFC，在w3c里是这样描述的：在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式化时，则为右边框紧挨）。即使在浮动里也是这样的（尽管一个包含块的边框会因为浮动而萎缩），除非这个包含块的内部创建了一个新的BFC。这样，当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。