一、BFC元素简介与基本表现。

BFC全程"Block Formatting Context",中文为"块级格式化上下文"。记住一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻雨覆雨都不会影响外部的元素。所以,避免margin穿透、清楚浮动什么的也就好理解了。

什么时候出发BFC呢? 常见的情况如下:

-> float 的值不为none ;

-> overflow 的值为auto,scroll或hidden;

-> display的值为table-cell,table-caption,inline-block中的任何一个;

-> position的值不为relative 和 static。

BFC特性很多,儿我们这里只关心一个,和float元素做相邻兄弟时候的表现。

会发现,普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文。

同时,元素原本的流体特性依然保留了。哈,这个很重要,也就是,虽然不与浮动交集,自动退避浮动元素宽度的距离,但,本身作为普通元素的流动性依然存在,反映在布局上就是自动填满除去浮动内容以外的剩余空间。哟,这不就是自适应布局嘛!

二、BFC自适应布局木块间的间距

说到间距,我们的第一反应就是margin. 于是,我们给BFC元素增加一个margin-left:20px, CSS代码如下:

.float-left {
float: left;
}
.follow-content {
margin-left: 20px;
background-color: #cad5eb;
overflow: hidden;
} 结果……纳尼~ 

 怎么还是像狗屁膏药贴在一起啊??

实际上,这里的margin并不是无效,而是值不够大,鞭长莫及啊!

如果按照上面的解释,那我们把margin-left:20px改成margin-left:150px就应该有间距了? 一试便知!

.float-left {
float: left;
}
.follow-content {
margin-left: 150px;
background-color: #cad5eb;
overflow: hidden;
}

注意:我这里举margin这个例子,不是让大家这样使用,只是为了让大家可以深入理解BFC元素与浮动元素混排的特性表现。实际开发,我们完全没有必要对BFC元素设置margin, 因为又回到了流体布局,明明是固定的15像素间距,但是,每个布局都要写一个不同的margin值,完全没有重用价值。

但是,间距部分的高潮来了!

我们可以使用浮动元素的margin-right或者padding-right轻松实现间距效果。间距是20像素,直接:

.float-left {
float: left;
margin-right: 20px;
}
与浮动元素的宽度是多少没有任何关系。不仅如此,我们还可以使用BFC元素的padding-left撑开间距(虽然margin-left作用鸡肋)。 三、与纯流体特性布局的优势
BFC自适应布局优势我总结了下面2点:
1、自适应内容由于封闭,更健壮,容错性强。比方说:内部clear:both不会与兄弟float产生矛盾。而纯流体布局,clear:both会让后面内容无法和float元素在一个水平上,产生问题。布局
2、自适应内容自动填满浮动区域,无需关心浮动元素宽度,可以整站大规模应用。而纯流体布局,需要大小不确定的margin/padding等值撑开合适间距,无法CSS组件化。
图片能大能小,布局依然良好


												

元素的BFC特性与自适应布局的更多相关文章

  1. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  2. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  3. CSS深入理解流体特性和BFC特性下多栏自适应布局

    一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...

  4. BFC特性及其简单应用

    BFC是什么? BFC(Block Formatting Context)中文直译就是‘块级格式上下文’,它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元 ...

  5. BFC特性下多栏自适应布局

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  6. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  7. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

  8. Atitit.100% 多个子元素自适应布局属性

    Atitit.100% 多个子元素自适应布局属性 1.1. 原理1 1.2. Table布局1 1.3. Css布局1 1.4. 判断amazui加载完毕2 1.1. 原理 每个子元素平均分配,但是有 ...

  9. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

随机推荐

  1. JQuery实现分页程序代码

    JQuery实现分页程序代码 做Web开发的程序员,分页时在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuer ...

  2. qt的安装及连接sql使用注意

    qt安装与使用 今天写下qt使用的注意事项,qt-project.org上已经更新了qt5的相关库,但是建议不是很熟系qt的朋友,或者说想使用传统qt api而不是qml的朋友, 继续下载老版本4.8 ...

  3. C语言中判断int,long型等变量是否赋值的方法

    博主这段时间在写一些C程序的代码,由于以前对C不是了解很多,故遇到很多瓶颈,当然,其中也有很多有趣的方法可以利用以解决这些难题,下面这个问题就是博主遇到的一个麻烦. 声明了 int ,long 型等局 ...

  4. Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境(八)

    Libvirt 是用c写的一个管理虚拟机及其资源(如网络.存储和外设等)的工具库,它不仅支持KVM/QEMU,它还支持xen,Vmware,OpenVZ和VirtualBox等其他HyperVisor ...

  5. 使用JavaScript重定向URL参数

    本人从网上查找(如有雷同,不胜荣幸.),并进行了修改,简单粗暴,实现使用JavaScript重置url参数 1.字符拼接形式 function setUri(para, val) { var strN ...

  6. 关于SQL 数据表中的密码加密

    首先,都知道一个字节(byte)等于八位二进制数.在数据表中将密码字段设置为binary类型,再结合哈希散列运算可以实现密码加密. 下面介绍下binary 和 varbinary: binary 和  ...

  7. C语言总结2

    12).预处理指令 1. 什么叫做预处理代码. 以#开头的代码就是预处理代码  #warning #import 2. 手写1个C程序的步骤.(面试题) 1>编写代码 2>编译 1)执行. ...

  8. Xpath学习笔记

    最近复习自己上一年的课本,想起来刚学那个时候想做一个写日记的软件. 想不如做,用控制台瞎写了一个,一做就成了,没什么bug,期间使用Xpath来读数据,所以就稍微学了一下. 学习过程就这样做一点笔记, ...

  9. python之路 - 基础4

    1.函数非固定参数 *args *kwargs def test(*args): print (args) test(1,2,3,4,5) test(*[1,2,3,4,5]) #*args = *[ ...

  10. 使用TypeScript开发ReactNative应用的简单示例

    最近小小尝试了下 ReactNative + TypeScript 开发APP,爬了无数坑之后总算弄出来个结果,重要的地方记录下,后面会附上示例代码: 1.开发工具的选择 windows 平台我接触的 ...