1. [代码]clearfix 清除浮动
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
} .clearfix {
zoom: 1;
}
2. [代码]clearfix的另一种写法 .clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
} .clearfix {
display: inline-block;
} html[xmlns] .clearfix {
display: block;
} * html .clearfix {
height: 1%;
} 3.贴上bootstrap里面的clearfix的写法
.clearfix {
zoom: 1;
}
.clearfix:before,.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}

  

 

 

clear-fix清除浮动的两种写法的更多相关文章

  1. css清除浮动的两种方式(clearfix和clear)

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  2. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  3. 关于clear与清除浮动

    今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...

  4. css清除浮动的几种方式,哪种最合适?

    细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...

  5. 前端布局常见IE6 bug的解决方法,清除浮动的几种方法以及各自的优缺点

    相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PN ...

  6. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  7. css清除浮动的8种方法以及优缺点

    浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...

  8. 转载 | float 清除浮动的7种方法

    什么叫浮动:浮动会使当前标签脱离文档流,产生上浮的效果,同时还会影响周边元素(前后标签)及父级元素的位置和width,height属性.下面用一个小例子来看一看浮动的全过程:1.首先我们新建一个网页, ...

  9. css考核点整理(一)-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

随机推荐

  1. 《C++之那些年踩过的坑(二)》

    C++之那些年踩过的坑(二) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. 今天讲一个小点,虽然小,但如果没有 ...

  2. 优雅的使用sublime写lua~ sublime lua相关必装插件推荐~~

    缘起 lua脚本语言虽好,代码写得飞快,可是写错了调试起来却很困难,lua使用者经常容易犯得一个错误是--写错变量名了,if end 嵌套太多没匹配~,多打了一个逗号, 假设定义了一个变量 local ...

  3. Mybatis的@Options注解

    mybatis的@Options注解能够设置缓存时间,能够为对象生成自增的key 第一个使用场景: 有一个表 CREATE TABLE instance ( instance_id BIGINT UN ...

  4. Struts2之OGNL表达式

    OGNL(Object-Graph Navigation Language的简称),对象图导航语言,它是一门表达式语言,除了用来设置和获取Java对象的属性之外,另外提供诸如集合的投影和过滤以及lam ...

  5. WP8.1小梦词典开发1:金山词霸API使用

    原文出自:http://www.bcmeng.com/windows-phone-api/ 今天开始小梦给大家分享一下小梦词典开发中几个关键问题,首先我们来看查词功能的实现.小梦词典的查词功能是通过金 ...

  6. Windows 10 IoT Serials 7 – 如何用树莓派制作家庭流媒体播放器

    Windows 10平台引入了AllJoyn开源软件框架,它提供了一组服务可以创建动态近端网络,让设备可以相互连接实现功能交互.目前,AllJoyn开源软件框架由AllSeen联盟负责管理.AllSe ...

  7. virtualenv 安装不同版本的虚拟环境的办法

    废话不多说直接上代码 virtualenv -p C:\Python27\python2.exe env 上面的*.exe是你要使用的python版本的exe文件的绝对路径. 官方文档参考:http: ...

  8. response.getWriter().write()与out.print()的区别(转)

    1.首先介绍write()和print()方法的区别:  (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等  (2).print():可以将各种类型(包括Object)的数据通 ...

  9. 安全性测试之防范 DDoS 攻击

    安全性测试之防范 DDoS 攻击   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90882 ...

  10. Android 用 camera2 API 自定义相机

    前言 笔者因为项目需要自定义相机,所以了解了一下 Android 关于 camera 这块的 API.Android SDK 21(LOLLIPOP) 开始已经弃用了之前的 Camera 类,提供了 ...