css中clearfix清除浮动的用法及其原理示例介绍
clearfix的定义:
.clearfix:after {}{
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的元素可以清除浮动来包裹内部元素。*/
.clearfix的原理:
css中clearfix清除浮动的用法及其原理示例介绍的更多相关文章
- css用clearfix清除浮动
本文从http://www.studyofnet.com/news/196.html复制. 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...
- CSS学习系列2 -- CSS中的清除浮动
CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...
- CSS之clearfix清除浮动
.clear { clear: both; height: 0; overflow: hidden; display: block; line-height: 0 } .clearfix:afte ...
- css中为了清除浮动经常用到的after样式
.cf:after { display: block; visibility: hidden; width:; height:; line-height:; font-size:; clear: bo ...
- clearfix清除浮动进化史
我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的. .clear{cle ...
- clearfix清除浮动
首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...
- [笔记]使用clearfix清除浮动
转载自奶牛博客 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; ...
- clear-fix清除浮动的两种写法
1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: ...
- css中vertical-align和line-height的用法
css中vertical-align和line-height的用法 1.先来看一种现象: (1).将一个图片放入一个div块中,div块背景颜色设置为aquamarine.将会发现图片与div块下边沿 ...
随机推荐
- ROS学习笔记(一)——软件版本的选择
下面是Google的SLAM系统Cartographer对系统的要求: Cartographer对ROS版本要求: ROS Indigo 对Ubantu 的版本要求: 所以,综上所述: Ubantu ...
- .net(C#)在vs2010版本下的MVC如何才能运行静态页面(html)
正如,我上篇写的那样,那是在测试下,我所实现的方法,但是作为WEB项目,终究要发布的,故我把发布和切换在这说一下. 据我实测,我在按照我上篇改了Views下的Webconfig文件后,在解决方案下建了 ...
- OneProxy自动剔除延迟节点
在多种情况下,MySQL主从节点之间可能存在延迟.比如,主库的写入能力强于从库的写入能力.从库单线程复制.从库复制出错导致相关进程停止.为了保证数据的时效性,OneProxy提供了复制时效性检查,用于 ...
- examine self thrice a day2017
1.6.2017 葰γí千萬丆γáò絠ィ壬菏鰯嚸,銣惈絠,倁噵ㄖㄅ者β淂簳掉.千澫丕楆被莂亽抓ィ主鰯點,以佌襲撃.那個記駐,吢軟劊嗐死尓垍己ㄖㄅ.絠仒槇可笑,鯟覀者βる誐手裏魢泾吺有談半リ的籌碼,還茬 ...
- JavaScript函数定义和调用 变量作用域
本文是笔者在看廖雪峰老师JavaScript教程时的个人总结 JavaScript中函数定义可以是这样的格式 function 函数名(参数) { 函数体 } 也可以是这样的格式 ...
- Unity3D 中的定时器
不算上 C# 自带的,目前知道两种,以下分别介绍. 1.每帧检查 定义一个时间变量 timer,每帧将此时间减去帧间隔时间 Time.deltaTime,如果小于或者等于零,说明定时器到了,执行相应功 ...
- Luogu 魔法学院杯-第二弹(萌新的第一法blog)
虽然有点久远 还是放一下吧. 传送门:https://www.luogu.org/contest/show?tid=754 第一题 沉迷游戏,伤感情 #include <queue> ...
- 20145236 GDB调试汇编堆栈过程分析
GDB调试汇编堆栈过程分析 首先需要输入sudo apt-get install libc6-dev-i386安装一个库才能产生汇编代码,然后输入gcc - g example.c -o exampl ...
- PHP浮点数计算
涉及到计算 和金额交易 使用bc系列函数 高精度计算 不会有0.57不精确的问题
- Android之ViewPager组件实现左右滑动View
什么是ViewPager VIewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用来实现左右滑动切换View的效果.如果想向下兼容需要 android-support-v4.j ...