利用BFC实现左右两列自适应布局

来源：互联网发布：arduino matlab编程编辑：程序博客网时间：2024/06/05 02:54

    左右两列自适应布局是前端经常会遇到的项目需求。通常的做法无外乎左列浮动定宽，然后右列或浮动，或设置外边距，或绝对定位等等。但是现在我们要用overflow来实现，想必很多人都会耳目一新。

overflow属性

overflow属性最常见的一个使用场景就是规定当内容溢出元素框时发生的事情。可能的值如下:

visible 默认值。元素内容不会被裁剪，元素框之外的内容仍然会呈现。
hidden 元素内容会被裁剪，并且元素框之外的内容是不可见的。
scroll 元素内容会被裁剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 浏览器自动处理元素内容的溢出，如果元素内容被裁剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
除此之外，也会经常看到通过overflow属性实现的一些效果，比如清除浮动，以及上面提到的两栏布局的实现。这些效果的实现，可能跟overflow属性的本意相差甚远，就像两种不相关的事务被硬生生的牵扯到了一起。其实不然，CSS Spec规范文档中还明确记录着overflow属性的另外一个重要作用。

overflow属性跟布局的关系

The CSS2.1 spec mandates that overflow other than visible establish a
new “block formatting context”.

CSS2.1规范中已经明确提出，设置overflow属性（非visible）能触发块级格式化上下文(Block Formatting Conext, BFC)。

BFC是个很大的话题，此处不展开，这里给出一个简化不精确的解释，BFC概念的引入，一定程度是为了特殊情况下布局计算的方便，元素触发BFC之后，其作用就相当于一个根容器，其内部的子元素会跟外界完全隔离开，子元素布局以及尺寸相关的计算都会以该元素容器为基础。

详细代码

做好了准备工作，我们就看看代码。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .main{            width: 100%;            height: 100%;            margin: 0;            padding: 0;        }        .left{            float: left;            width: 200px;            height: 100%;            background: blue;            margin-right: 20px;        }        .right{            height: 100%;            overflow: hidden;            background: red;            word-wrap:break-word        }    </style></head><body>    <div class="main">        <div class="left">1111111</div>        <div class="right">22222222222222222222222222bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈55555555555        </div>    </div></body></html>

实现效果：
这里写图片描述

这样就实现了简单的左右两列自适应布局，是不是感叹css真的很奇妙！

小tips:

内容区要加入word-wrap:break-word，这样数字和英文才会自动换行哟！

阅读全文

1 0