clearfix:after 的用法
想要清除浮动就要在父元素上 加上 clearfix:after
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容; 
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。 
display: block; <----加入的这个元素转换为块级元素。 
clear: both; <----清除左右两边浮动。 
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已; 
line-height: 0; <----行高为0; 
height: 0; <----高度为0; 
font-size:0; <----字体大小为0; 
} 
.clearfix
 { *zoom:1;}
<----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
clearfix:after 的用法的更多相关文章
- css清除浮动clearfix:after的用法详解
		
如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法: CSS代码: 复制代码 代码如下: .clearfix:after ...
 - clearfix的最佳方案----在路上(22)
		
clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...
 - 解读浮动闭合最佳方案:clearfix
		
.clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...
 - Clearing Floats清除浮动--clearfix的不同方法的使用概述
		
清除浮动早已是一个前端开发人员必学的一课.毫无疑问,多年来,我们已经接触过多种清除浮动的方法,现在“clearfix methods”越来越被大家熟知.在深入剖析“clearfix”的多种用法之前,我 ...
 - 浮动闭合最佳方案:clearfix
		
之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} ...
 - PC-常见问题-清除浮动
		
常用:.clear{clear:both;height:0px;overflow:hidden;}>最优浮动闭合方案(这是我们推荐的): .clearfix:after{content:&quo ...
 - 【css】清除浮动(clearfix 和 clear)的用法
		
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...
 - clearfix的用法(转)
		
clearfix的用法 (2013-12-31 10:41:24) 标签: clearfix 清除浮动 clearboth height zoom 分类: 网页制作 如果有一个DIV作为外部容器,内部 ...
 - css中clearfix清除浮动的用法及其原理示例介绍
		
clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...
 
随机推荐
- feign请求写法
			
@FeignClient(value = "test", url = "${proxy.srvs.test:}") public interface ISubS ...
 - 【Python系列】Python自动发邮件脚本
			
缘起 这段时间给朋友搞了个群发邮件的脚本,为了防止进入垃圾邮件,做了很多工作,刚搞完,垃圾邮件进入率50%,觉得还不错,如果要将垃圾邮件的进入率再调低,估计就要花钱买主机了,想想也就算了,先发一个月, ...
 - 移动端布局基础viewport
			
划重点 手机屏幕相对着桌面浏览器小,传统网页的设计在手机上体验糟糕 Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话),用于创建一个虚拟窗口(la ...
 - 数据库基本概念及Oracle基本语句
			
一.数据库分类 通常是按照数据模型的特点将传统数据库系统分成网状数据库.层次数据库和关系数据库三种. 1.网状数据库 顾名思义,网状数据库采用的是以记录类型为结点的网状数据模型,是一种导航式(Navi ...
 - [转]CSS自动换行后缩进
			
原文 https://blog.csdn.net/u011974797/article/details/71439794 例如: ●这是第一行太长了超出 显示到第二行 想实现的效果: ●这是第一行太长 ...
 - 【leetcode】Heaters
			
Winter is coming! Your first job during the contest is to design a standard heater with fixed warm r ...
 - 对Git仓库里的.idea进行研究------引用
			
1.什么是.idea文件夹 因为IntelliJ IDEA是JetBrains最早推出的IDE(JetBrains一开始叫IntelliJ),因此使用IDEA作为配置文件夹的名称.按照这个SO问题里最 ...
 - AJAX 实例解析
			
AJAX 实例 为了帮助您理解 AJAX 的工作原理,我们创建了一个小型的 AJAX 应用程序: 实例 AJAX 不是新的编程语言,而是一种使用现有标准的新方法.深圳dd马达 AJAX 是与服务器交换 ...
 - XML 验证器
			
XML 错误会终止您的程序 XML 文档中的错误会终止你的 XML 程序. W3C 的 XML 规范声明:如果 XML 文档存在错误,那么程序就不应当继续处理这个文档.理由是,XML 软件应当轻巧,快 ...
 - 实战build-react(三)+ style-components
			
npm install --save style-components https://www.jianshu.com/p/27788be90605(copy) "axios": ...