CSS页面布局的迷你布局——BFC布局

2013-05-20 分类：网站建设

我们俗称的BFC（Block Formatting Context）中文解释为块格式化上下文。我们通过一个简单的float布局示例来看看BFC。首先，我们创建一个盒子，盒子中包含一个设置了浮动的图片和一段文本。如果有足够多的文本内容的时候，文本会围绕着图片（把整个图片包裹起来）。

I am a floated element.

I am text inside the outer box.

/* CSS */

.outer {

border: 5px dotted rgb(214，129，137)；

border-radius: 5px;

width: 450px;

padding: 10px;

margin-bottom: 40px;

}

.float {

padding: 10px;

border: 5px solid rgba(214，129，137，.4);

border-radius: 5px;

background-color: rgba(233，78，119，.4);

color: #fff;

float: left;

width: 200px;

margin: 0 20px 0 0;

}

文本围绕着浮动元素：

如果在上面的基础上删除一些文本，就没有足够的文本去围绕图片（上例是一个浮动的元素），同时由于浮动元素脱离文档流，盒子元素的边框（包含浮动元素和文本的容器）高度就会随着文本的减少而降低（常被理解元素浮动之后致使其父容器坍塌）。

上图再次证明，没有足够多的文本时，盒子元素边框的高度就会低于浮动元素的高度。

之所以会这样，那是当浮动一个元素时，盒子仍然保持原来的宽度，是文本所占的空间缩短了，才给浮动元素腾出位置，这就是为什么背景和边框能够看起来包裹住了浮动元素。

有两种方式可以解决这个布局问题。一种是使用clearfix黑魔法，就是在文本和图片（浮动元素）的下面插入一个元素，比如div，并将设置clear属性值为both。另外一种方法是使用overflow属性，把它设置为非默认值visible的值。

.outer {

overflow: auto;

}

使用overflow:auto后盒子就能包裹浮动元素。

overflow之所以能够有效是因为当它的值是非visible时会创建一个BFC，而BFC的一个特性就是包裹浮动元素。

使用Clearfix黑魔法时，除了在浮动的元素和文本最下面插入一个元素之外，更简单，也是最为经典的方式是使用CSS的伪元素::after或伪类:after。其实也就是大家常说的清除浮动，有关于这方面的详细介绍可以点击这里。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联