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

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

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

<!-- HTML -->

<div class="outer">
    <div class="float">I am a floated element.

</div>
    I am text inside the outer box.

</div>

/* 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。其实也就是大家常说的清除浮动,有关于这方面的详细介绍可以点击这里。

当前题目:CSS页面布局的迷你布局——BFC布局
网页路径:https://www.cdcxhl.com/news27/777.html

成都网站建设公司_创新互联,为您提供定制网站App开发网站改版服务器托管网站建设电子商务

广告

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

商城网站建设