什么是BFC和hasLayout?

  次阅读 作者:智能小宝 来源:互联网 2015-10-13 14:58 我要评论(0)

下面我来给各位同学介绍关于什么是BFC和hasLayout,希望文章能给你提供帮助

关于BFC的介绍,可直接查看站内文章 :

http://www.111cn.net/cssdiv/css/60534.htm

而hasLayout是ie私有的概念,ie7及更低版本的ie浏览器不支持BFC,但我们可以针对ie7、6浏览器加入对应的hasLayout规则来实现BFC的效果!具体怎么触发haslayout不是本文重点,请自行查阅相关资料

2、BFC和hasLayout布局的优势在哪里

相比于圣杯布局(查看示例),BFC和hasLayout布局显示灵活,控制也更方便,与媒体查询media querry结合使用,能很好地实现多设备兼容的需求!

3、使用BFC和hasLayout应该注意的问题

1、overflow:hidden触发BFC的同时,也能触发ie7的hasLayout,但overflow:hidden是ie7新添加的触发hasLayout的新属性,ie6并不支持,因此要兼容ie6必须加_zoom:1;

2、浮动和不浮动元素间,ie6会有3px的间隙,这是ie6的bug,解决方法是:若浮动元素是左浮动,则给左浮动元素加margin-right:-3px;若浮动元素是右浮动,则给右浮动元素加margin-left:-3px;

3、不浮动元素的左间距margin-left值若小于左浮动的元素宽度则不会生效,同理,不浮动元素的右间距margin-right值若小于右浮动的元素宽度也不会生效!这个跟没触发bfc或ie的haslayout时,不浮动元素的左右间距取值生效情况是保持一致的;

4、在实际运用中,浮动元素跟不浮动元素间都会加入左右间距控制,考虑到浮动元素可能会加入当前流行的多设备兼容的media query ,浮动元素的宽度会随着媒体查询的设置的css变化而变化,而不浮动元素的margin-left/right值能否生效又是跟浮动元素的宽度关联的,这时在不浮动元素上加入margin-left/right值来控制元素的间距,显示麻烦,不好掌控,推荐给浮动和不浮动元素间加间距的做法是:直接给浮动元素加margin值,而不是给不浮动元素加margin值,唯一要注意的是给浮动元素加margin值时,应该考虑到ie6浮动和不浮动元素间的3px bug,即ie下浮动元素margin-left/right正确值应该比其它浏览器的对应值小3px才能保持与其它浏览器显示效果一致,请看下面具体实例:

代码如下

复制代码

<style>

*{margin: 0;padding: 0;}

#demo{}

#demo li{overflow: hidden;margin-bottom: 15px; list-style: none;background-color: #900;_zoom:1;}

#demo .thumb{width: 150px;height: 150px;float: left;background-color: #f00;margin-right: 5px;_margin-right: 2px;}/* ie6浮动和不浮动元素间的3px bug,即ie下浮动元素margin-left/right正确值应该比其它浏览器的对应值小3px才能保持与其它浏览器显示效果一致 */

#demo .thumb img{vertical-align: top; border: none;}

#demo .fix{overflow: hidden;background-color: #080;color:#fff;_height: 1%;}/* overflow: hidden;能触发bfc;height:1%;或zoom: 1;都可用来触发ie的haslayout以达到同bfc一样的显示效果 */

#demo .tr{text-align: right;}

#demo .right{float: right;width: 200px;height: 35px;line-height: 35px;background-color: yellow;margin-left: 5px;_margin-left: 2px;}

</style>

<br />

<br />

<ul id="demo">

<li>

<a href="#" class="thumb">

<img src="" alt="这是图片!"/>

</a>

<div class="fix">

<h2>标题标题标题标题</h2>

<p>描述描述描述描述描述描述描述描述描述描述描述描述描述</p>

<p class="tr"><a href="">更多&gt;&gt;</a></p>

</div>

</li>

<li>

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...