谈BFC和haslayout
今天提到BFC和haslayout，就顺带在网上查查资料，总结一下它们。
CSS2我们再熟悉不过，当然它里面我们需要掌握的，就是CSS2的选择器和布局，选择器总共31种。避开这个不说，我们说布局。
布局经常用到的有浮动、定位，当然也需要知道盒子模型，这里的盒子模型不是说就是内边距、外边距、边框等，他们只是其中的一种。
盒子模型总共有5个：1) BFC；2) haslayout；3) 元素盒 ；4) EM盒 ；5) 行盒
BFC：
含义：顾名思义就是Block Formatting Context。
怎么触发形成：
- float 不能设置为 none。
- overflow 不能设置为 visible。
- display 的值为（table-cell、table-caption、inline-block）。
- position 不能设置为 relative 和 static。
haslayout：
含义：“Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时
由来：不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。
下列元素应该是默认具有 layout 的：
- <html>, <body>
- <table>, <tr>, <th>, <td>
- <img>
- <hr>
- <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
- <iframe>, <embed>, <object>, <applet>
- <marquee>
作用：
清除浮动；
不和浮动元素重叠（效果同BFC）；
水平两栏自适应排版；
.second-item { overflow: hidden; *zoom: 1;//IE6 }
谈BFC和haslayout的更多相关文章
- BFC and Haslayout
一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC flo ...
- 文本溢出、垂直外边距合并、BFC、hasLayout
今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...
- BFC与hasLayout
BFC与hasLayout都是CSS布局上的概念. 几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解. hasLayout则是IE6.7产生许多bug的根源. 一.BFC Floats, ...
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- BFC和haslayout
待补充 参考链接:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 标准浏览器: BFC(block formatt ...
- BFC与hasLayout之间的故事
刚拒绝了一个很有诱惑的公司,不是不想去,而是对现在的能力还不确定,希望能够进一步提高自己的技能,所有想写博客了,监督自己的学习进度·········现在还没有开放博客,希望成熟一些后再开放吧! 进入正 ...
- 轻谈BFC
BFC 定义 CSS2.1的定义 Block formatting contexts 9.4.1 Block formatting contexts Floats, absolutely positi ...
- CSS的BFC和hasLayout及其应用场景
前端精选文摘:BFC 神奇背后的原理 一.BFC是什么? 先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观 ...
- BFC和haslayout（IE6-7）（待总结。。。）
支持BFC的浏览器(IE8+,firefox,chrome,safari) Block Formatting Context(块格式化上下文)是W3C CSS2.1规范中的一个慨念,在CSS3中被修改 ...
随机推荐
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- [转载] Java CheckBoxTree
代码基本上是copy的.只是在使用上有一些自己的想法. 先上code吧! 虽然别的地方也有.但是还是转一份给自己. 出处:http://blog.csdn.net/joy_125/article/de ...
- MVC Code First 自动生成数据库时生成的表名会多了一个s
如图:我的类文件都是不带s的
- October 25th Week 44th Tuesday 2016
The best preparation for tomorrow is doing your best today. 过好今天,就是对明天最好的准备. Tomorrow is always base ...
- 3ds max旋转简化后模型
简化后的模型无法与原场景直接匹配,因此需要以下步骤: 简化后的模型导入,原点在右上角 旋转后,方法是选中所有模型,右键->旋转 在偏移的x和y各输入180 还有做一些平移,微调 在导入整个she ...
- Vue.js与MVVM
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Java 中使用javah编译头文件出现找不到类的情况
在工程的bin目录下,输入命令: javah -classpath . -jni 类路径.JNI类
- 【Java EE 学习 57】【酒店会员管理系统之分页模板书写】
分页一直是一个比较麻烦的问题,特别是在我做的这个系统中更是有大量的分页,为了应对该问题,特地写了一个模板以方便代码重用,该模板包括后台分页的模板.前端显示的模板两部分. 一.分页分析 分页需要三种类型 ...
- css雪碧图生成工具4.2更新
v4.0更新连接:http://www.cnblogs.com/wang4517/p/4493917.html v4.1更新连接:http://www.cnblogs.com/wang4517/p/4 ...
- 15.linux按键驱动程序（二）
linux按键驱动程序 包含内容定时器延时去抖动,阻塞型设备驱动设计 一.定时器延时去抖 按键所用开关为机械弹性开关,当机械触点断开.闭合时,由于机械触点的弹性作用,开关不会马上稳定地接通或断开.因而 ...