【转】使用:after清除浮动
以前总是加一个<div sytle="clear:both"></div>来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
为兼容IE6,IE7,因为ie6,ie7不能用after伪类。加上下面代码
.clearfix{zoom:1}
一般情况下,如果父层内部有浮动(float)可能导致父层的高度为0,加上clearfix后就行了:
<style type="text/css">
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1}
.parent{width:120px;}
.left{float:left;display:inline;}
.right{float:right;display:inline;}
</style>
<div class="clearfix">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
【转】使用:after清除浮动的更多相关文章
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- float---浮动带来的影响与清除浮动带来的影响方法----在路上(20)
使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...
- [html/css]清除浮动的相关技巧
以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...
- 前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- css清除浮动深度解析
首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...
- css清除浮动大全共8种方法
原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...
- CSS清除浮动技巧
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...
- overflow:hidden清除浮动原理
overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.
随机推荐
- mockjs模拟前后端交互
mockjs是用于mock数据(造假数据)的组件. mockjs官网链接为:http://mockjs.com/:mockjs官网有mockjs的源代码.API以及示例. mockjs拦截ajax请求 ...
- centos7.1 x86_64系统安装openstack(Mitaka)一
一.Openstack各组件简单介绍 keystone:身份认证服务 glance:镜像服务 nova:计算服务 neutron:网络服务 Cinder:块存储服务 Swift:对象存储服务 heat ...
- (转)nodejs中npm常用命令
npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...
- App.domain http->https
App.domain = `${location.origin}/toa-mgw/rest/gateway`.replace(/http:\/\//, 'https://');
- C++动态加载DLL调用方法
一.构建DLL路径 char szTmp[_MAX_PATH]; char* szPath = getcwd(szTmp, _MAX_PATH);//获取当前工作目录 //构建dll路径 strc ...
- Opennms 问题整理
1.网页时间显示不正确,需要修改:bin/opennms: 添加:MANAGER_OPTIONS="$MANAGER_OPTIONS -Duser.timezone=Asia/Shangha ...
- 利用Servlet导出Excel
-----因为Excel可以打开HTML文件,因此可以利用页面的Form表单把页面中的table内容提交给Servlet,然后后台把提交上来的table内容转换成文件流的形式,并以下载的形式转给客户端 ...
- js事件监听/鼠标滚轮/行为/冒泡/键盘的兼容性写法
addEvent:function(el,type,fn,capture) { if (window.addEventListener) { if (type === "mousewheel ...
- java快速学习
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Java是面向对象语言.这门语言其实相当年轻,于1995年才出现,由Sun公司出品 ...
- jexus部署ASP.NET MVC网站
1.新建项目,我这里新建的空项目中的MCV 2.用nuget删除这两个类库 Microsoft.CodeDom.Providers.DotNetCompilerPlatform Microsoft.N ...