css学习笔记

BFC

2018-03-29  本文已影响0人  白璞1024

BFC

参考 https://zhuanlan.zhihu.com/p/25321647

常见的定位方式

概念

BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

触发bfc

特性

1、同一个bfc下外边距发生折叠

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>

上边的第一个margin-bottom和第二个的margin-top进行了重叠,因为她们都在同一个bfcbody

如果要避免,就将他们放到两个不同的容器中,就好像下边的 container

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>
.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

2 可以包含浮动元素

我们都知道,浮动的元素会脱离普通文档流,来看下下面一个例子

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

这个时候外边框就是一条线


v2-371eb702274af831df909b2c55d6a14b_r.jpg

[图片上传失败...(image-364c66-1522293144290)]

但是如果放到bfc中的时候:

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
bfc_float.jpg

[图片上传失败...(image-880172-1522293144290)]

3、 防止元素被浮动元素覆盖

先看文字环绕的效果

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
bfc_overwrite.jpg

[图片上传失败...(image-2eb71a-1522293144290)]

如果设置bfc的话,第二个元素添加overflow:hidden

[图片上传失败...(image-26ca07-1522293144290)]


bfc_overwrite2.jpg

这个思路可以用于两栏布局

各个布局的分析(http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

  1. float:left浮动元素有破坏性和包裹性,失去了元素本身的流体自适应性,无法用来实现自动填满容器的自适应布局

  2. position:absolute 这个脱离文档流有些严重,

  3. overflow:hidden 块状元素的流体特性保存相当完好,However, 就跟清除浮动:

    .clearfix { overflow: hidden; _zoom: 1; }
    

    一样。由于很多场景我们是不能overflow:hidden的,因此,无法作为一个通用CSS类整站大规模使用。因此,float+overflow的自适应布局,我们可以在局部(你确定不会有什么被剪裁的情况下)很happy地使用。

  4. display:inline-block CSS届最伟大的声明之一,但是,在这里,无法实现自动识别换行,会被尺寸束缚

  5. display:table-cell 让元素表现得像单元格一样,IE8+以上浏览器才支持。但是当你将他的单元格长度设置的特别大的时候,里边的内容不会超出包裹元素的额,这时候就实现了自适应换行

  6. display:table-rowwidth无感,无法自适应剩余容器空间。

由于overflow有剪裁和出现滚动条等隐患,不适合作为整站通用类,于是,最后,类似清除浮动的通用类语句:

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: ''; display: table; clear: both;
}

两栏或多栏自适应布局的通用类语句是(block水平标签,需配合浮动):

.cell {
    display: table-cell; width: 9999px;
    *display: inline-block; *width: auto;
}
上一篇下一篇

猜你喜欢

热点阅读