clear-fix清除浮动的两种写法
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清除浮动的两种写法的更多相关文章
- css清除浮动的两种方式(clearfix和clear)
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- 关于clear与清除浮动
今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...
- css清除浮动的几种方式,哪种最合适?
细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...
- 前端布局常见IE6 bug的解决方法,清除浮动的几种方法以及各自的优缺点
相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PN ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- css清除浮动的8种方法以及优缺点
浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...
- 转载 | float 清除浮动的7种方法
什么叫浮动:浮动会使当前标签脱离文档流,产生上浮的效果,同时还会影响周边元素(前后标签)及父级元素的位置和width,height属性.下面用一个小例子来看一看浮动的全过程:1.首先我们新建一个网页, ...
- css考核点整理(一)-浮动的理解和清除浮动的几种方式
浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...
随机推荐
- Uri API
四中LaunchMode:http://blog.csdn.net/liuhe688/article/details/6754323 onNewIntent:http://www.cnblogs.co ...
- 同步 VS 异步
同步请求资源 请求msdn上的一个页面计算页面大小 static void Main(string[] args) { string url = "https://docs.microsof ...
- Webpack单元测试,e2e测试
此篇文章是续 webpack多入口文件.热更新等体验,主要说明单元测试与e2e测试的基本配置以及相关应用. 一.单元测试 实现单元测试框架的搭建.es6语法的应用.以及测试覆盖率的引入. 1. 需要安 ...
- 四大组件之一---------activity的知识
activity的生命活动 activity的四种启动模式 Android中以一个任务栈用来管理activity 一个栈的形式进行管理 在清单文件中,通过<activity>标签的andr ...
- spdlog源码阅读 (2): sinks的创建和使用
2. sink创建 2.1 还是rotating_file_sink 我们仍然以rotating_file_sink为例来说明在spdlog中sink的创建过程. 在spdlog-master/tes ...
- Java的一些基础知识
1.do-while循环不论循环条件判断结果,至少会执行一次. 2.Javac用于Java源代码文件编译成字节码的编译器. 3.import关键字导入包. 4.Java是Sun公司与1995年退出的高 ...
- Angular2之管道学习笔记
管道.可以把一个输出流与另一个输入流连接起来.类似 linux.gulp都有应用. 在Angular2中使用管道非常方便.Angular2中本身提供了一些内置管道.当然也可以自定义管道. 文档链接:h ...
- supervisor的集中化管理搭建
1.supervisor很不错,可惜是单机版,所以上github上找了个管理工具supervisord-monitor. github地址: https://github.com/mlazarov/s ...
- zsh 简单介绍
什么是 zsh,要想解释好这个问题,那么得先说明什么是 shell.不负责任的解释说法就是 shell 就是一个壳.这个壳可不是蜗牛的壳,而是计算机的一个壳,当然也不是计算机的外壳啦,这个壳是相对于计 ...
- ASP.NET MVC制作404跳转(非302和200)
前言:距离上次发文已经有几个月了! 这段时间李,制作了一个博客网站,现将博客文章选一些发表到博客园,顺便为自己网站打一下广告! 产生404的原因主要有以下: 1.浏览器和爬虫:某些浏览器会请求网站的f ...