什么是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!

人工智能实验室
相关文章相关文章
  • Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

    Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

  • teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

    teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

  • Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

    Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

  • 2018深圳国际人工智能展览会 2018 shenzhen International Artif

    2018深圳国际人工智能展览会 2018 shenzhen International Artif

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

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...