css - clearfix-清除浮动

参考：

http://www.cnblogs.com/zllwebjs/archive/2010/03/19/1689980.html

http://www.cnblogs.com/zhangyufeng523/archive/2011/05/09/2041224.html

清除浮动方法有好几种，

1. 用空div，设置css为clear:both

2. 用空br，设置css为clear:both

3. 用空br，用原生clear属性

以上三种都需要添加额外元素，对dom操作容易产生其他问题（之前做项目确实碰到过空div进行clear带来的烦恼）

再来看看先进的方法：

/*.clearfix{zoom:1}*/

/*.clearfix{*height:1%}*/

.clearfix:after{content:"."; clear:both; height: 0; display: block; visibility: hidden; line-height: 0;}

通过设置zoom或者height都可以触发IE的hasLayout属性，这样就可以解决浮动带来的问题。

转载于:https://www.cnblogs.com/chyong168/archive/2011/11/20/2256107.html

css - clearfix-清除浮动相关推荐

php里清除浮动代码,CSS中使用clearfix清除浮动的方法
首先在很多很多年以前我们常用的清除浮动是这样的. CSS Code复制内容到剪贴板 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码 ...
css .clearfix,谈谈CSS之关于clearfix清除浮动
原标题:谈谈CSS之关于clearfix清除浮动在网上要是你随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix" ...
clearfix清除浮动
在开发html页面时,我们经常会用到css的清除浮动,这里我推荐一种版本的清除方法,个人感觉非常好用. .clearfix:before,.clearfix:after{content:"& ...
clearfix清除浮动进化史
clearfix清除浮动首先在很多很多年以前我们常用的清除浮动是这样的. .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴 ...
CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
清除浮动最有效的css写法,清除浮动最有效的css写法
说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...
CSS中清除浮动的代码
.clearfix:after {content: "\0020";display: block;height: 0;clear: both; }.clearfix {zoom: ...
CSS基础-清除浮动-李南江
配套视频下载地址清除浮动盒子高度问题在标准流中内容的高度可以撑起盒子的高度 <style>div{background-color: red;}p{width: 200px;heig ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
css如何清除浮动（二）
2019独角兽企业重金招聘Python工程师标准>>> 在上篇介绍通过设置祖先元素的高度类清除浮动,但在实际的网站开发中,很少会设置元素的高度,那这是为什么呢? 是因为元素一般都能被 ...

css - clearfix-清除浮动

css - clearfix-清除浮动相关推荐

最新文章

热门文章