【BFC / hasLayout】的更多相关文章

BFC / hasLayout

BFC - block formatting context 1.float的值不能为none 2.overflow的值不能为visible 3.display的值为table-cell,table-caption,inline-block中的任何一个 4.position的值不为relative和static 5.width , height , min-width , min-height 不为auto hasLayout ie浏览器 1.writing-mode 2.-ms-writing…

【转】关于Block Formatting Context－－BFC和IE的hasLayout

转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮…

CSS清浮动处理（Clear与BFC）

在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Clear float</title> <style type="text/css"&…

bfc+css

CSS BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse). 当涉及到可视化布局的时候,Block Formatting…

你所不了解的float（滥用float的怪异现象）

float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图所示,运用了float属性后就显示为如下图所示,这就是浮动的设计初衷 float的一些特性:包裹性.破坏性. 包裹的特性其实主要有三个表现:收缩.坚挺.隔绝. float破坏性主要表现在使父容器塌陷(浮动使得父容器塌陷是标准而非bug,否则如果不让父窗口塌陷怎么实现文字环境效果) 浮动的破坏性只是单纯的为了实现文字环绕效果 BFC(block format context)块级格式化上下文 如何解决浮动造成的父容器塌陷? 也就是…

HTML标签的应用（新手）

雪碧图(精灵图): sprite compass-合并(尽量宽高相同) 兼容性: 1.resct重置技术:normalize技术 2.加前缀:-webkit- -moz- -0- -ms- 3.<!DOCTYPE>解析模式 4.css hack 不同浏览器显示不同的页面内容 5.条件注释<LTE...><GTE...> 6.导入包(引入) ------------------------------ 1.模糊度:opality(0-1) filter(0-100) --…

css 浮动

1. 浮动 浮动是css的布局功能,在CSS中,包括div在内的任何元素都可以浮动的方式显示.它能够改变页面中对象的前后流动顺序.浮动元素会脱离文档流,不占据空间.浮动元素可以左右移动,直到碰到包含它的边框或者浮动元素的边框停留. 2. 浮动可能带来的问题 父元素的高度无法撑开,影响与父元素同级的元素:与浮动元素同级的非浮动元素会紧跟其后,可能导致看不到非浮动元素的情况:浮动元素可能会影响到页面的整理布局效果 3. 清除浮动影响的方法 (1)使用空标签清除浮动 在所有浮动标签后面添加一个空标签,…

深入了解float

1.float的历史   初衷是为了图片的文字环绕,将img设置float 2.破坏性与包裹性  a.父元素没有设置高度,内部元素浮动后,服务元素的高度被破坏了,可以将其父元素设置overflow:hidden;    记住:这不是bug,这是标准,特性使然(初衷就是为了文字环绕,如果高度不塌陷,下面面的文字怎么上来环绕呀!) b.float会使元素block块状化  c.去空格化 3.清除浮动带来的影响   a.clear     * 底部挂一个div     * after伪元素底部生成 b…

CSS常见问题及兼容性

CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script>  ; ; ;                    ;;;};;;;;;;;         margin:0px;         *float:left;//解决方案     } </style> <body>     <div class="box">         <input type="text"/&…

你所不了解的float（滥用float的怪异现象） (转)

阅读目录 float设计初衷就是为了实现文字环绕效果 如何解决浮动造成的父容器塌陷? 兼容各浏览器清除浮动的通用方式 滥用浮动 运用浮动的一些特性 浮动与布局 浮动与单侧固定布局 浮动与智能自适应的流体布局 让IE7飙泪的浮动问题 包含clear的浮动元素包裹不正确 浮动元素倒数2个莫名垂直间距bug 浮动元素倒数2个浮动最后一个字符重复bug 浮动元素与文本不在同一行的问题 如何使用float不出现上述所述怪异现象 回到顶部 float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图…