BFC和haslayout(IE6-7)(待总结。。。)
支持BFC的浏览器(IE8+,firefox,chrome,safari)
Block Formatting Context(块格式化上下文)是W3C CSS2.1规范中的一个慨念,在CSS3中被修改为flow root。格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等。元素如果创建了BFC,那么BFC决定了如何对其内容进行定位,以及它与其他元素的关系和相互作用。
BFC布局规则:
—内部的Box会在垂直方向,一个接一个地放置。
—Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
—每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
—BFC的区域不会与float box重叠
—BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此。
—计算BFC的高度时,浮动元素也参与计算
什么情况会创建BFC?
—根元素
—float属性不为none
—position为absolute或fixed
—display为inline-block,table-cell,table-caption,flex,inline-flex
—overflow不为visible
即
启动BFC
|
取消BFC
|
|
<html> | ||
float
|
除 none 以外的值
|
|
position
|
absolute,fixed
|
relative
|
display
|
inline-block,table-cell,table-caption,flex,inline-flex
|
... |
overflow
|
除 visibile 以外的值 |
haslyout(IE6-7)
启动haslayout的值 |
取消haslayout的值
|
|
display
|
inline-block |
其他值
|
width/height
|
除了auto以外的值
|
auto
|
position
|
absolute
|
static
|
float
|
left或right
|
none
|
zoom(zoom是微软IE专有属性,可以触发haslayout但不会影响页面的显示效果。zoom:1常用来除错,不过ie5对这个属性不支持。)
|
有值 |
normal或者空值
|
min-height、min-width
|
任何值
|
|
max-height、max-width
|
任何值除了none
|
|
overflow、overflow-x、overflow-y
|
任何值除了visible
|
|
position | fixed | |
转载于:https://www.cnblogs.com/zhaojieln/p/4221767.html
BFC和haslayout(IE6-7)(待总结。。。)相关推荐
- bfc和haslayout
1 BFC是什么 Block Formatting Context (块格式化上下文)是W3C CSS 2.1 规范中的一个概念,在CSS3中被修改为flow root.格式化则表明了在这个环境中,元 ...
- hasLayout与Block formatting contexts的学习(上)
hasLayout与Block formatting contexts的学习 @(css BFC)[IE hasLayout|妙瞳] hasLayout是什么? haslayout 是Windows ...
- 【百度前端学院学习笔记】Day6 浮动/BFC
[百度前端学院学习笔记]Day6 浮动/BFC 一.什么是浮动? 二.普通流 / 浮动 / 绝对定位 三.BFC/Flow Root 3.1 什么是BFC? 3.2 BFC 的特性 3.2.1 特性一 ...
- E6终极备忘:修复IE6下_25+_Bugs
E6终极备忘:修复IE6下_25+_Bugs 引言:"珍惜生命,远离IE 6!" 对IE6最好的策略就是不去兼容它. 好吧,我知道你的难处,你不得不去兼容IE6这个狗血 ...
- css居父容器下,整理:子容器垂直居中于父容器的方案
本文在evernote里有备份.如果evernote的阅读区域嫌窄了,那么可以把这个链接拖入书签并点击javascript:jQuery("#container").width(9 ...
- 转答寒冬的面试题(1)
有关注前端和微博的朋友一定留意到了前一阵寒冬和玉伯关于前端面试的讨论,后来老赵和左耳朵耗子也加入其中,讨论带来了非常多的启发和思考--不久之前自己也经历了几轮面试,决心对自己的基础开始加强,正巧寒冬老 ...
- CSS浮动(float)属性学习经验分享
作为一名前端开发的初学者,CSS的布局定位无疑成为了一个难点,这两天通过看一些博客的技术分享和自己的反复实践,大概领悟到了一些float的"门道". 下面就通过一些例子来归纳总结一 ...
- CSS 清理浮动 clear属性
虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用.浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置. 首先,看看父元素的高度塌陷.假设有一个容器,其中两个子元素,一个子元 ...
- 就这样进入了前端开发
回顾 立夏,广州.今晚回来的路上,在学校的草坪上发现许多萤火虫,眨着眨着,点缀这个初夏的静夜.上次见到这番画像的时候,已经是一年前的事了.时钟转得飞快,眨眼自己也到了毕业的季节,总想要装一下文艺.无奈 ...
最新文章
- {code:-1,error:`QcloudSecretId`不能为空,请确保 SDK 配置已正确初始化}解决方法
- JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
- 关于BGP的notification错误码的解释
- python小程序-python好玩的小程序
- Python自动解压各种压缩文件
- linux下配置samba服务器(以CentOS6.7为例)
- C语言变量定义和赋值
- 新手理解的JS原型链 1
- Confluence 6 匿名访问远程 API
- Asp.net发布网站
- Mysql管理之二进制日志文件的管理
- JVM监控及诊断工具命令行篇之jstack
- 2022大众点评商家数据
- 【转载】UMTS到LTE的系统架构演进
- php钉钉机器人,PHP调用钉钉机器人
- 1196:踩方格(递推)
- 终于把所有的 Python 库都整理出来啦
- 三维管型ybc预览以及动态成型仿真控件
- NCA(Neighborhood Components Analysis)
- 斐讯dns劫持,路由器DNS被劫持的解决办法
热门文章
- java中怎么判断返回200_java – 从Spring REST API返回HTTP代码200
- 论文笔记--基于 FCM 聚类的跨模态人物图像标注方法-2015
- Sony MZ-RH1 Hi-MD
- 使用GDAL下载并转换SRTM的DEM数据(二)
- 笑谈ArcToolbox (1) ArcToolbox 的发展方向
- ArcGIS制图表达Representation-制图表达使用须知
- erlang四大behaviour简述
- 移动开发平台收入对比
- VS2008创建win32动态链接库图文流程
- java 监听端口_java游戏服务器检查报告(经验分享)