一、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. js在IE浏览器和非IE浏览器中的兼容性问题

    下面列出IE和非IE中常见的一些js兼容性问题.  //window.event   IE:有window.event对象   非IE:没有window.event对象.可以通过给函数的参数传递eve ...

  2. Java-继承的应用

    class array {  private int[] temp;  private int foot;  public array(int len)   //为temp数组规定大小,并开辟空间,申 ...

  3. struts2标签库使用小结

    之前的demo中用了一些struts2标签,用的是struts2.2.1.1. Struts2的标签常常和OGNL(图对象导航语言)一起使用.有几点总结如下: [引用请注明出处:http://blog ...

  4. python并发获取snmp信息及性能测试

    python & snmp 用python获取snmp信息有多个现成的库可以使用,其中比较常用的是netsnmp和pysnmp两个库.网上有较多的关于两个库的例子. 本文重点在于如何并发的获取 ...

  5. 关于LAMP的配置之(虚拟机的安装、创建、配置)

    一.先安装好VMware (1)根据电脑系统是多少位的,可以从网上下载相应的虚拟机VMware (2)下载好了之后,就可以先行安装虚拟机,双击打开VMware的安装程序 (3)再出现的对话框中,点击& ...

  6. 聊聊数据库(MySql)连接吧,你真的清楚吗?

    前言 说到数据库连接,这个大家都很熟悉了.但是熟悉一般来自于下面三种情况 * 刚开始学编程的时候,老师就说用完的数据库连接一定要关闭,不然会有严重的后果. * 编程一段时间后,大家都说要用连接池来优化 ...

  7. SqlServer创建数据表描述及列描述信息

    SqlServer创建数据表描述及列描述信息 Intro Q: 为什么要创建描述信息? A: 鼠标悬停在对应表和列上时,会出现描述信息,可以提高工作的效率,借助工具我们根据数据表可以生成Model,可 ...

  8. nodejs,http,get,post,请求

    本文源于实践及其部分网络搜索: 其实大部分,官方都有介绍... 官方参考链接:https://nodejs.org/api/http.html var http = require('http'); ...

  9. html5的navigator调用手机震动

    navigator.vibrate(s) 或 navigator.webkitVibrate(s),不过该属性只在安卓系统有效.

  10. springMVC Helloword 入门程序

    1  首先是在web.xml 中配置 <servlet> <servlet-name>SpringMVC</servlet-name> <servlet-cl ...