万能清理浮动写法

CSS：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.clearfix { zoom: 1; }

.clear { clear: both; }

原
理：对于子元素浮动的元素，使用clearfix来清理。Firefox等标准浏览器以及IE8+支持：after属性，会使用
clearfix：after进行清理，对于IE6和7，不支持：after属性，会使用zoom属性来清理，且zoom属性只有IE系列可以识别，并且
IE8及之后浏览器使用zoom无法触发layout来实现清理。需要使用独立标签进行清理的话，使用clear来清理。

兼容所有浏览器

时间： 2024-10-14 00:56:06

万能清理浮动写法的相关文章

清理浮动（闭合浮动）

因为将子元素都设置为浮动后,父元素内部就好像没有东西了,被掏空了,无法被子元素撑起来.所以就会出现塌陷的情况. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .first, .second { float:left; background:red; width:100px; height:50px; margin:10px

三种清理浮动的方式

在页面布局时,我们常常会遇到这样一个问题:对子元素采用浮动之后两者会脱离文档流,导致父元素因为没有内容而收缩,隐藏掉我们设置的背景和其他相关样式.这个时候,我们为了清除浮动的影响,一般有以下三种方法: 方法一:添加一个进行清理的元素(例如一个段落标签或换行标签),r然后用clear属性进行清理. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

更简洁的 CSS 清理浮动方式

CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动. /* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; } 其原

清理浮动的三种常用方法以及如何居中一个浮动元素

千里之行始于足下 今天看到一个题目说如何居中一个float:left的元素的题目,我蛮以为用margin:0 auto 就可以解决了.然而,试验之后,发现事实并非如此,才发现自己对于这方面的知识竟是相当忙乱!于是撇下手头事务,翻书查资料温习了这部分‘简单’的内容.并总结如下. 一.清理浮动的三种方法. 当给元素设置了float属性之后,我们知道,元素便会脱离文档流的束缚,像一片水中浮动的树叶随波逐流.但是,在浮动的情况下,可能会导致网页内容出现一些我们并不想让其发生的干扰,例如其父元素的包裹作用

清理浮动的方法

浮动出现的原因: 一开始浮动被创建的原因是为了实现报纸文字环绕图片的格式,如下图, 后来经过大家的学习研究后才发展出了后来的一系列功能. 盒子浮动清理: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .wrapper{

【荐】万能清除浮动样式

这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用. 这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器. <style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix

css清理浮动

1.对父级设置适合CSS高度 2.clear:both清除浮动 具体CSS代码: 1 .divcss5{ width:400px;border:1px solid #F00;background:#FF0} 2 .divcss5-left,.divcss5-right{width:180px;height:100px; 3 border:1px solid #00F;background:#FFF} 4 .divcss5-left{ float:left} 5 .divcss5-right{ f

[转]清理浮动的全家

原文地址:http://www.jb51.net/css/67471.html 原文地址:http://www.twinsenliang.net/skill/20090413.html 说到清除浮动,最直接的反应是clear:both这个css属性,还在为为啥不用这个属性而疑惑,至于清除浮动后面的原理,一直处于懵懂的状态,终于下定决心去了解一下~查查资料,再自己去验证~~然后就开始了 1.概念的区分: 1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | r

css清除浮动的几种方法整理

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type="text/css"> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}