万能清除法 html,万能清除浮动样式
这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。
这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* for IE/Mac */
Update @ 2008.11.12
刚刚看到一篇日志说这个问题,受到了点启发:
.clearfix:after { content: "020"; display: block; height: 0; clear: both; }
.clearfix { zoom: 1; }
这个是优化版的清除浮动的样式,很值得推荐。
另外,我见到了一个无敌的清除浮动的样式,这个是通过独立的代码来清除的。
html body div.clear, html body span.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }
这个样式可以通过在页面中添加
来清除页面中的浮动。
这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。
万能清除法 html,万能清除浮动样式相关推荐
- 第十七章 BFC、置换元素、三角形、0.5像素的线/1像素边框、透明、万能清除法、隐藏元素
一.BFC:块级格式化上下文 一个元素如果具备了BFC的条件,那么这个元素会形成一个独立的渲染区域,内部元素的渲染不会影响外界 触发方式 1.overflow 2.padding 3.float 4. ...
- 解决高度塌陷:万能清除法
逆战班 高度塌陷:当父元素不设置高度时,其他高度会随着里面的子元素的高度的变化而变化,即父元素的高度由子元素的高度撑开,达到高度自适应的目的.而当父元素的**第一级子元素都设置了浮 动**时,父元素不 ...
- 【荐】万能清除浮动样式
这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用. 这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器. ...
- 清除浮动的四种样式写法
/* 清除浮动1 */ /* 添加额外标签使用 */ .clear { clear: both; } /* 清除浮动样式2 */ .clearfix { overflow: auto; /* over ...
- 清除浮动的常用几种方式
(1)给父级元素单独定义高度(height) 原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单. ...
- CSS学习(第四天)(浮动,常见网页布局,清除浮动,PS切图)
CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...
- CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式 网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
- HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如 <div style="clear:both;"></di ...
- 清除浮动的常用的几种方法
首先我们要知道为什么要清除浮动? 如果说一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要 ...
最新文章
- superset的安装和使用--docker
- c语言中 字符串常量的界定符,C字符串操作函数
- Ubuntu中的回车与换行
- 微信退款异步通知解密异常-填充无效,无法被移除
- ubuntu14.04 出现symbol lookup error
- 蓝桥 PREV-34 历届试题 矩阵翻硬币
- ASP.NET MVC- UrlHelper的用法
- 《大型网站技术架构:核心原理与案例分析》.pdf——架构系列必看20本技术书籍
- 大学生职业生涯规划书性格特征_个人职业生涯规划书性格分析范文-职业规划书性格分析...
- 公司内部搭建DHCP和DNS服务器
- 计算机睡眠状态无法唤醒屏幕,电脑休眠后无法唤醒,可以用这个方法-华力学校...
- 使用Pandas的read_html方法读取网页Table表格数据
- 人人都是心理学家,mbti等
- linux:ping不通www.baidu.com
- Python数据清洗:strava运动跑步和骑行路径路线经纬度散点序列数据
- onConfigurationChanged
- 文本大数据挖掘项目(Go语言)
- vivo的Android升级包,安卓7.0通用升级包vivo
- 2022年中国证券行业智能投顾专题分析
- 在Flex4中使用RemoteObjectAMF0来连接fluorine网关 转