CSS 教程 - 闭合浮动元素
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。
因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。
但是有时我们却需要这种自动闭合行为,具体如何处理呢?
有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢。
后来又有了一种新的方式,使用 :after 伪类动态的嵌入一个用于清除浮动的元素,这种方法和上一种原理一样,不同的只是把这个额外的内容用 CSS 生成,但考虑到 IE不支持 :after 不得不做了不少的 hack。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证 html 比较干净,所以用得还是比较多的。
再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素,IE自然又是不支持的,所以这种方法和上一种方法一样都对IE 做了不同处理(具体就是触发layout),不同的就是overflow 没有 :after 伪类那么麻烦了,缺点也有,overflow 可能会产生一些小冲突。
在使用 overflow 之前还有过一种使用 float 的方法,就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。
这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,
毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。
使用 float 虽然在IE 和标准兼容浏览器中都能闭合浮动元素,但原理却是不同的,IE/Win 中 float 触发了 layout 因而闭合了浮动,而在标准兼容浏览器中,float 其实和上一种方法中的overflow 原理一样,产生了一个“块级格式化范围”——这是CSS 规范中提到的一种现象,它往往具有某种独立性,特性之一就是会自动闭合内部的浮动元素。
按照规范,以下类型的元素会产生一个块级格式化范围
● 浮动元素,left 或者 right 皆可。
● 绝对定位的元素。
● inline-block 元素,不过这个 gecko目前不支持。
● table-cell 类型元素,其实 table, table-head-group, table-row 什么的也都可以,还有inline-table(gecko不支持)也同样,因为他们都会间接产生一个匿名的 table-cell。
● overflow 取值非 visible 的元素。
所以,原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素,而且只需要 CSS,无需其他。
顺带说一下以上除了overflow,其余都有一个附加效果就是自动收缩父容器宽度。
而对于 IE/Win,它有一套自己的体系,就是 layout,具有 layout 的元素会自动闭合浮动元素,再来看看触发 layout 的 CSS 属性,会发现和上面的块级格式化范围
有很多类似之处:
● 浮动元素
● 绝对定位元素
● display:inline-block
● zoom
● width/height
● overflow/overflow-x/overflow-y [IE7 新增]
● max/min-width/height [IE7 新增]
以上来看 IE 中闭合浮动元素的方法也不少,自然也都有其局限性,要么有附带效果,要么使用的是非标准属性(无法通过验证)。
还要提一点的是 display:inline-block,这个属性对 IE 而言本身没什么用,实际效果只是给一个元素暗地添加了 layout,但是标准兼容浏览器是认得这个属性的,所以要不影响这些浏览器,需要将 display 设回默认。
这里 IE 有一个 bug,如果先定义了display:inline-block,然后再将 display 设回 block(这两个 display 要先后放在两个 CSS 声明中才有效果),那么 layout 不会消失,同时也不会影响其他浏览器,所以目前来说,这也算一个不错的触发 layout 的方法:
.gainlayout{display:inline-block;}
.gainlayout{display:block;}
所以要跨浏览器闭合浮动元素,可以选择的方式还是很多的,如何搭配使用这些 CSS属性就要具体情况具体分析了,灵活应用条件注释也很有必要,要是实在不行我们回过头来还有 clear 可以用嘛。
CSS 教程 - 闭合浮动元素的更多相关文章
- 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
- CSS:CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
- css浮动布局,浮动原理,清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
- CSS之浮动布局(float,浮动原理,清除/闭合浮动方法)
css之浮动布局 本人博客:查看文章 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...
- HTML。CSS浮动元素详解
浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...
- css让浮动元素水平居中
对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...
- CSS围住浮动元素的三种方法
浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...
- CSS浮动元素的水平居中
方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- 闭合浮动的方法css
浮动是一个有意思(你也可以说它很麻烦)的CSS属性,任何元素设置了浮动,层级就提高了,会影响它后面没设置浮动的元素,这些倒霉的被影响者会跑到浮动层的下面去(当然IE6.IE7除外),那解决方法呢? 常 ...
随机推荐
- leetcode-买卖股票的最佳时机④*
题目描述: 方法一: class Solution: def maxProfit(self, k: int, prices: List[int]) -> int: if len(prices) ...
- [JZOJ3187]【GDOI2013模拟8】的士
题目 描述 题目大意 在一个数轴上,有些人要从某个点到达另一个点. 出租车从最左端出发,将所有人送到它们的目的地,最终到达最右边的点. 出租车只能做一个乘客,并且可以在图中将乘客丢下. 问最短时间. ...
- [JZOJ5355] 【NOIP2017提高A组模拟9.9】保命
题目 描述 题目已经足够清晰了,所以不再赘述题目大意. 思考历程 一眼看下去,好像是一道大水题! 然而,再看几眼,感觉又不是一道水题! 然后想了半天,感觉它特别难转移! 最终打了一个暴力,然后发现样例 ...
- mybatis结果封装到hashmap中没有null的数据
1.在ssm框架中 在mybatis-config.xml配置文件中加下面这句代码即可解决 <setting name="callSettersOnNulls" value= ...
- 第九章 Odoo 12开发之外部 API - 集成第三方系统
Odoo 服务器端带有外部 API,可供网页客户端和其它客户端应用使用.本文中我们将学习如何在我们的客户端程序中使用 Odoo 的外部 API.为避免引入大家所不熟悉的编程语言,此处我们将使用基于 P ...
- CLOSE_WAIT问题讨论
1.https://cloud.tencent.com/developer/article/1347610 2.https://blog.huoding.com/2016/01/19/488 3.ht ...
- 最新MySQL5.7.3.0版本安装(图文版本)
转自:http://www.myexception.cn/mysql/1609536.html 可以从http://dev.mysql.com/downloads/下载MySQL服务器安装软件包,我下 ...
- <每日一题>题目21:简单的python练习题(21-30)
#21.cookie和session的区别 ''' 1.cookie数据存放在客户的浏览器上,session数据存放在服务器上 2.cookie不是很安全,可以通过分析本地cookie组成伪造cook ...
- [Ceoi2007]Royaltreasury
#1945. [Ceoi2007]Royaltreasury Online Judge:Bzoj-1945 Label:树形Dp,高精度 题目描述 在很久很久以前的一个王国里,王国的财产开始变得越来越 ...
- 嘴巴题6 BZOJ3450JoyOI1952 Easy
Time Limit: 10 Sec Memory Limit: 128 MB Submit: 936 Solved: 698 [Submit][Status][Discuss] Descriptio ...