登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

CSS使用clearfix清除浮动

2016-06-03 15:12:49 | 浏览量:343
做页面布局,经常要碰到清除浮动 (对于一些浮动元素),一种最简单的方式是在要清除浮动的元素后直接加一div
但这样增加了页面的结构的源代码,造成代码的拥肿,其实也可以有更好的办法,

在浮动元素的外包clearfix样式,页面代码如下:


	
对于清除浮动的css代码:



.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:
1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。
2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。


上一篇: Gulp基础教程

下一篇: web实现QQ第三方登录

需求及问题提交:

点击图片更换数字

0.4996s