[转]清理浮动的全家

原文地址:http://www.jb51.net/css/67471.html

原文地址:http://www.twinsenliang.net/skill/20090413.html

说到清除浮动,最直接的反应是clear:both这个css属性,还在为为啥不用这个属性而疑惑,至于清除浮动后面的原理,一直处于懵懂的状态,终于下定决心去了解一下~查查资料,再自己去验证~~然后就开始了

1、概念的区分:

  1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none; 
  2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。

  我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在父元素上设置clear:both清除浮动并不能解决高度塌陷的问题。

2、为何要清除浮动:

  css中的定位机制:普通流,浮动,绝对定位 (其中"position:fixed" 是 "position:absolute" 的一个子类)

  子元素浮动漂浮于普通流之上,像浮云一样,但只能左右浮动,父元素内不存在其他普通流元素,就会表现为高度为0

  清除浮动的方法:

    

我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了,下一个专题再写)。对应的DEMO

  1. 采用伪类:after进行后续空制的高度位零的伪类层清除
  2. 采用CSS overflow:auto的方式撑高
  3. 采用CSS overflow:hidden的方式产生怪异适应
  4. 采用display:table将对象变成table形式
  5. 采用div标签,以及css的clear属性
  6. 采用br标签,以及css的clear属性
  7. 采用br标签,以及其自身HTML的clear属性

粗略的看,他们都能将问题解决;然而他们另外一方面又有着各自的利弊。(一一对应)

  1. 优点结构语义化完全正确,不会产生其余的怪异问题。

    缺点复用方式不当容易造成代码量急剧增大。

    建议最外层轻浮动时使用,或清晰模块化复用方式的人使用。

  2. 优点结构语义化完全正确,代码量极少。

    缺点多个嵌套后,点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)。

    建议内个模块使用,请勿嵌套。

  3. 优点结构语义化完全正确,代码量极少。

    缺点内容增多时候极易不会自动换行而内容被隐藏掉。

    建议宽度固定时使用,请勿嵌套。

  4. 优点结构语义化完全正确,代码量极少。

    缺点盒模型属性已经改变,可想而知奇异事件自然多得你数都数不到。

    建议如果你不想改Bug改死你的话,最好不要使用;不过可以作为alpha版本当中临时性的忽悠下测试。

  5. 优点代码量极少,复用性极高。

    缺点完全不能完美的适应语义化,不利于改版以及需求变更。

    建议初学者使用,可以让你快速的解决浮动问题。

  6. 优点语义化程度比第5种情况要更优;代码量极少,复用性极高。

    缺点语义化依旧不完美,不利于改版以及需求变更。

    建议初学者使用,可以让你快速的解决浮动问题。

  7. 优点语义化程度比第5、6种情况要更优;代码量最少,复用性极高。

    缺点语义化依旧不完美,不利于改版以及需求变更。

    建议引导初学者思维升级时使用,让其明白与其用classname来控制一种表现,倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现,毕竟后者的代码量更少。

最佳清除浮动方法:

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

:before伪元素是用来处理margin边距重叠的

时间: 2024-10-17 00:02:53

[转]清理浮动的全家的相关文章

清理浮动(闭合浮动)

因为将子元素都设置为浮动后,父元素内部就好像没有东西了,被掏空了,无法被子元素撑起来.所以就会出现塌陷的情况. <!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{

万能清理浮动写法

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属

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

总结 清除浮动的四种常见方法

1.使用空标签清除浮动. 我用了很久的一种方法,空标签可以是div标签,也可以是P标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both.此方法的弊端在于增加了无意义的结构元素. ps:对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法.至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素).不过要注意的是,<br />本身

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们