clearfix 用法
如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开。看下面的例子:
Div布局如下:
Css代码如下:
.out{border:1px solid #F00; width:500px;}
.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}
.inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}
IE和FF显示如下图:
传统的人解决方法:
但是,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之 后,则因为clear:both,它会被强制换一行显示。所以,最好使用下面clearfix方法。外层div加上clearfix样式。clearfix定义如下:
.clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}
.clearfix{*zoom:1;}
这样修改以后显示正常。
那段代码是用来清除浮动的。
以下代码可以这么解释:
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容;
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;
height: 0; <----高度为0;
font-size:0; <----字体大小为0;
}
整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。(这个css的原理是经过使用 after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素 (display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.)
之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。
.clearfix { *zoom:1;} <----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
clearfix 用法的更多相关文章
- 【css】清除浮动(clearfix 和 clear)的用法
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...
- css清除浮动clearfix:after的用法详解
如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法: CSS代码: 复制代码 代码如下: .clearfix:after ...
- clearfix的用法(转)
clearfix的用法 (2013-12-31 10:41:24) 标签: clearfix 清除浮动 clearboth height zoom 分类: 网页制作 如果有一个DIV作为外部容器,内部 ...
- css中clearfix清除浮动的用法及其原理示例介绍
clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...
- clearfix的用法
如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开.看下面的例子:Div布局如下:Css代码如下:.out{border:1 ...
- clearfix:after 的用法
想要清除浮动就要在父元素上 加上 clearfix:after .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容: content: " ...
- clearfix的最佳方案----在路上(22)
clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...
- 你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
- 前端代码目录结构、常用 piugin、元素补充用法及其它注意事项
目录结构: app: .html文件 css: .css文件 script: 脚本文件 plugin: 插件 (此目录放一些通用代码) 注意事项: 1.在IE浏览器下img会显示边框,为了保证兼容 ...
随机推荐
- java ==与equals()方法的总结
1.基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean 他们之间的比较,应用双等号(==),比较的是他们的值. 2.复合数据 ...
- Java 解析Excel(xls、xlsx两种格式)
Java 解析Excel(xls.xlsx两种格式) 一.环境 JDK 1.8 二.JAR 1.commons-collections4-4.1.jar 2.poi-3.9-20121203.jar ...
- 整型 布尔值 字符串 for循环
1.整型 2.布尔值 3.字符串 4.for循环 1.整型:.python中有长整型, Python3中只有整型 2.布尔值: bool:Ture 真 False 假 数字和布尔值可进行转 ...
- 补充一下 sizeof
sizeof是一个运算符,给出某个类型或变量在内存中所占据的字节数 sizeof(int) //告诉你int占据几个字节 sizeof(i) //告诉你i这个变量占据几个字节 注:sizeof是静态运 ...
- gym 101081 gym F. Auction of Services 最小生成树+倍增LCA
F. Auction of Services time limit per test 2.0 s memory limit per test 256 MB input standard input o ...
- robot framework学习二-----元素定位
文章摘自:https://www.cnblogs.com/fnng/p/3901391.html 不要误认为Robot framework 只是个web UI测试工具,更正确的理解Robot fram ...
- angular 2 animation 结构笔记 version 4.2.2
import { Component, Input, OnInit } from '@angular/core'; import { trigger, state, style, animate, t ...
- Spring中的@Async
在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在spring 3.x之后, ...
- hive新功能cube和rollup
1.cube简称数据魔方,可以实现hive多个任意维度的查询,cube(a,b,c)则首先会对(a,b,c)进行group by,然后依次是(a,b),(a,c),(a),(b,c),(b),(c), ...
- VSCode汉化
1.打开VSCode 点击箭头指示地方 在搜索框中输入chinese 然后安装中文简体 2.按住 Ctrl+shift+p 选择配置显示语言 然后会看见下面的样子 添加 "locale&q ...