CSS-BFC
最近看幕课网CSS之Float,float最初是为了实现文字的环绕效果;这里面提到BFC,刚好项目中正用到一种解决BFC的方法,DIV在添加float后,就不存在文档流中啦,不占据空间,这使的一些未浮动的DIV会出现一些奇怪的布局,像塌陷,这里
形成BFC的条件(符合以下任一条件即可):
1) float的值不为none;
2)overflow的值不为visible;
3)display的值为 table-cell、table-caption和inline-block之一;
4)position的值不为 static或relative中的任何一个;
我觉的正是DIV浮动起来了,才比以前的table布局更加灵活,最简单清除浮动的方式是添加一个新的DIV,附上clear:both,这样会产生一些对于以后不易维护的代码,继而出现利用after,before伪类+content/zoom来清楚浮动,目前项目解决方法就是这个,具体代码:
xxx.after{
display:block;
clear:both;
height:;
font-size:;
content:"";
zoom:1
}
大师手法:
xxx:after{
content:"";
display:table;
clear:both;
}
这边跟BFC还有个类似的叫hasLayout,抽空看看博文再做记录。
*******补充IE hasLayout*******只存在与IE7,IE6
hasLayout是IE渲染引擎的内部组成部分,一个元素计算自身内容大小,不是根据自身对自己组织和计算大小,就是依赖父元素来计算和组织;
大多IE下的显示错误,就是源于 haslayout。如果它设置成了true,它就不得不去渲染它自己,因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词,如果haslayout没有被设置成true,那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方
它是布尔值,为true是既其拥有布局,通过ie developer toolbar 拥有 haslayout的元素,通常显示为“haslayout = -1”;
使其拥有布局方式:常用zoom:1
IE6:height:1% 切记不能设置overflow:visible;或用条件注释:<!--[if IE 6]><![endif]-->(gt:大于不包含,gte:大于包含,lt:小于不包含,lte:小于包含)
IE7:设置其min-height:0
haslayout 问题引起的常见 bug
一、
CSS-BFC的更多相关文章
- CSS BFC in depth
CSS BFC in depth BFC (Block Formatting Context) https://developer.mozilla.org/en-US/docs/Web/Guide/C ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- CSS BFC(Block Formatting Context)
BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...
- CSS BFC学习笔记
BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发 ...
- <HTML/CSS>BFC原理剖析
本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...
- CSS—BFC原理解析与应用
我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Contex ...
- CSS BFC(格式化上下文)深入理解
什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...
- CSS——BFC
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算 元素若不是bf ...
- css BFC布局及用处
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 这篇文章讲的很简单很实用
- bfc+css
CSS BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在创建了 Block Formatting Context 的元素 ...
随机推荐
- 提升你的Java应用性能:改善数据处理
许多应用程序在压力测试阶段或在生产环境中都会遇到性能问题.如果我们看一下性能问题背后的原因,会发现很多是由数据处理不当造成.数据处理在应用面对大数据量时是非常关键的.这里有一些实用的数据处理技巧可以帮 ...
- android studio class org.bouncycastle.asn1.asn1primitive overrides final method equals
好吧 上手as 又遇到一个问题: class org.bouncycastle.asn1.asn1primitive overrides final method equals... 项目运行的是后报 ...
- selenium webdriver(6)---cookie相关操作
介绍selenium操作cookie之前,先简单介绍一下cookie的基础知识 cookie cookie一般用来识别用户身份和记录用户状态,存储在客户端电脑上.IE的cookie文件路径(win7) ...
- JS倒计时 代码
JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...
- Ubuntu---2
1.Ubuntu学习笔记之:安装中文语言包 http://askubuntu.com/questions/59356/how-do-i-get-chinese-input-to-work
- head frist 设计模式学习之 JVM中的博物馆奇妙夜(观察者模式)
博物馆奇妙夜! 博物馆奇妙夜!博物馆奇妙夜!重说三!!!JVM看了<博物馆奇妙夜>电影之后,决定在自己家里开一个博物馆!毕竟需要什么new一下就好,博物馆很快就开起来了,并且任命你为馆长( ...
- Yii框架中ActiveRecord使用Relations
参考文章: http://blog.csdn.net/yjj1s/article/details/6885276 http://www.gowhich.com/blog/38 http://www.c ...
- hdoj 2063 过山车【匈牙利算法+邻接矩阵or邻接表】
过山车 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- SqlCommand对象
SqlCommand对象以及如何使用它与数据库交互 1.什么是command对象2.如何使用ExecuteReader方法查询数据3.如何使用ExecuteNonQuery方法插入和删除对象4.如何使 ...
- Theano FCN实现与训练经验与教训小结
NaN 计算softmax loss时要用numeric robust 的计算方式. softmax与 loss可能要分开计算. 得到前者的计算方式可以是常规方法. 但计算后者时要注意无穷大和NaN的 ...