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. 九度OJ题目1076:N的阶乘 (java)运用BigInteger的例子。

    题目描述: 输入一个正整数N,输出N的阶乘. 输入: 正整数N(0<=N<=1000) 输出: 输入可能包括多组数据,对于每一组输入数据,输出N的阶乘 样例输入: 4 5 15 样例输出: ...

  2. STC-单片机控制系统

    电源测量命令 60V开 FD02060001010100000060V关 FD02060002010100000060V保开 60V保关 -8KV开 -8KV关 FD02092802010201000 ...

  3. 关于报错:AttributeError: module 'turtle' has no attribute 'setup' 问题

    对于我们菜鸟,往往安装软件后,都容易使用默认设置,结果将写的文件保存到了安装目录下. 这样造成了很大得隐患,如果写得文件,名称与安装目录下得系统文件名称重复,就容易出现以上报错. 解决方法:1.将文件 ...

  4. python + selenium <四>

    层级定位 swich_to_alert swich_to_frame swich_to_window 1. driver.switch_to_alert().accept()#最简单,直接点击确定关闭 ...

  5. ASP.NET脚本过滤-防止跨站脚本攻击(收集别人的)

    ASP.Net 1.1后引入了对提交表单自动检查是否存在XSS(跨站脚本攻击)的能力.当用户试图用<xxxx>之类的输入影响页面返回结果的时候,ASP.Net的引擎会引发一个 HttpRe ...

  6. JDBC连接数据以及操作数据

    好久没有写博文了,写个简单的东西热热身,分享给大家. jdbc相信大家都不陌生,只要是个搞java的,最初接触j2ee的时候都是要学习这么个东西的,谁叫程序得和数据库打交道呢!而jdbc就是和数据库打 ...

  7. sql 两种分页offset和row_number简单分析

    新建临时表字段id,向临时表里插入1,2,3,4,5,6 if object_id('tempdb..#test') is not null drop table #test create table ...

  8. python终端中退格键,方向键不能使用

    在安装Python的时候先安装 yum install readline-devel.x86_64 -y 如果python已经安装过了就重新安装 ./configure    make all mak ...

  9. python文件读写出现乱码总结

    1.错误的打开方式 #coding=utf-8f = open("test.txt",'w+')f.write('Mars is slim,isn\'he? \n 火星教')pri ...

  10. React文档翻译系列(三)JSX简介

    # React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: ``` const element = Hello world! ``` 这种有趣的标签语法既不是字符串也不是HTML. 这种形 ...