一、清除浮动的目的。

  1、当一个父元素的高度不写或为auto时,而且这个父元素内又有浮动的子元素,那么这时候该父元素的高度将不会自动适应子元素的高度,也可以说高度是0px;

  有如下代码:

    <div class="divp" style="width:300px; background:red; border:3px solid #000000;">
<div style="height:300px;float:left; background-color:Green">123123</div>
</div>

  此代码父元素高度不设置,而且里面又有左浮动高度为300px的子元素。实际显示效果为:

    

    可以看到,父div仅仅显示为其边框的高度,并没有适应其子元素的高度,要正确显示父元素的边框的话,此时就要清除浮动。我们在原来的代码的基础上加多一个<br/>以用于清除浮动,实际代码如下:

    <div class="divp" style="width:300px; background:red; border:3px solid #000000;">
<div style="height:300px;float:left; background-color:Green">123123</div>
<br/ style="clear:both;" >  //此行代码用于清除浮动
</div>

    现在再来看看现在的效果:

    

    注意:清除浮动的元素要放在正确的位置上,必须紧贴着浮动元素。

  2、布局错位问题。

    因为浮动元素脱离了标准文档流,因此其它非浮动元素可能会受此影响而错位。

    例如有如下代码:

<div style="border:2px solid #000; width:320px;">
<div style="width:100px;height:100px;float:left; border:1px solod #555">左浮动元素</div>
<div style="width:100px;height:100px;float:right; border:1px solod #AAA">右浮动元素</div>
</div>
<div>看看我的位置</div>

    理论上说来,最下面的div与上面的div没有关系,因此会自动排到上面的div的下面一行。来看效果:

    

    可以看到,效果不像预期,究其原因,还是上面的父div高度不适应子浮动元素而导致,高度仅仅为边框的高度,从而下面的div自动顶上去了,因此到此错位

    我们来改写上面的代码如下所示:

<div style="border:2px solid #000; width:320px;">
<div style="width:100px;height:100px;float:left; border:1px solid #555555">左浮动元素</div>
<div style="width:100px;height:100px;float:right; border:1px solid #AAAAAA">右浮动元素</div>
<br style="clear:both;" />
</div>
<div>看看我的位置</div>

    上面的代码仅仅添加了一个<br/>元素用于清除浮动,来看最终效果。

    

    看到效果已经正确了。

    但是,如果清除浮动的元素的位置放置不正确会有什么后果呢?再来改写下面的代码:

<div style="border:2px solid #000; width:320px;">
<div style="width:100px;height:100px;float:left; border:1px solid #555555">左浮动元素</div>
<div style="width:100px;height:100px;float:right; border:1px solid #AAAAAA">右浮动元素</div>
</div>
<br style="clear:both;" /> //稍稍调整了一下清除浮动的元素的位置
<div>看看我的位置</div>  
</body>

    效果如下:

    

    可以看到,虽然下面的div的位置正确了,但是上面的父元素还是没有适应子浮动元素的高度。

  今天公司的前端发给了我一个清除浮动的解决方法列表,觉得挺好的,有的甚至见都未见过。整理如下:

1. float
  缺点:层层往上找,没完没了,到了body那,算是个头 float 和 margin:0 auto; 有冲突
2. display:inline-block;
  缺点:不能设置 margin:0 auto;
3. overflow:hidden;
  缺点:很多JS交互特效做不了,多出去的部分隐藏了
4. 在父级内,加空DIV:clear:both;
  缺点:父级不能加padding,否则IE6 IE7不兼容
5. <br clear="all" />
  缺点:每次都要加这个换行符
6. .clear:after { content: '\20'; clear: both; display: block; }
  缺点:如果代码多了点,也叫缺点的话……
  此外,如果父级没有宽,就必须为父级加上:zoom:1;用来解决IE6 IE7下的问题

CSS之清除浮动的更多相关文章

  1. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  2. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  3. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  4. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  5. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  6. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  7. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  8. CSS float清除浮动

    解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...

  9. 【css】清除浮动(clearfix 和 clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

  10. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

随机推荐

  1. Win8.1 MSDN各版本下载(64位/32位,简体中文,繁体中文,英文),X86&X64,EN,CHS,CHT

    英文64位ed2k://|file|en_windows_8_1_x64_dvd_2707217.iso|3899295744|8E604054013D21209B851E41DC19F6F5|/ 英 ...

  2. Ubuntu 14.04远程登录服务器--openssh的安装和配置简明步骤

    如果要主机通过网络操作嵌入式板子,ttelnet就够了,但是 如果要相互传文件,则必须使用另外一个强大的软件SSH.更完整的步骤和截图请参考http://jingyan.baidu.com/artic ...

  3. XML Schema <第三篇>

    验证XML文档是否符合议定的XML结构有两种方法,分别是DTD模式与XML Schema.本文主要介绍XML Schema. 一.XML Schema的优点 XML Schema基于XML,没有专门的 ...

  4. 《Programming WPF》翻译 第6章 5.我们进行到哪里了?

    原文:<Programming WPF>翻译 第6章 5.我们进行到哪里了? WPF提供了资源工具,让我们运用在用户界面中,动态并具有一致性.我们可以在资源字典中存储任意资源,并且可以遍及 ...

  5. java日期时间处理小结

    这两周时间的Java开发让我感觉到JAVA语言确实把一些简单的事情搞得很复杂,比如日期时间处理,或许是考虑不同时区国际化跨平台之类的因素,但JAVA语言处理确实让我很困惑,相信身边好多开发的同事也如此 ...

  6. Best Cow Line (POJ 3217)

    给定长度为N的字符串S,要构造一个长度为N的字符串T,起初,T是一个空串,随后反复进行下列任意操作. *从S的头部删除一个字符,加到T的尾部 *从S的尾部删除一个字符,加到T的尾部 目标是要构造字典序 ...

  7. Micro Python - Python for microcontrollers

    Micro Python - Python for microcontrollers MicroPython

  8. POJ 1065 Wooden Sticks / hdu 1257 最少拦截系统 DP 贪心

    参考链接:http://blog.csdn.net/xiaohuan1991/article/details/6956629 (HDU 1257 解题思路一样就不继续讲解) POJ 1065题意:给你 ...

  9. Hibernate(二)——POJO对象的操作

    POJO对象其实就是我们的实体,这篇博客总结一下框架对POJO对象对应数据库主键的生成策略,和一些对POJO对象的简单增删改查的操作.  一,Hibernate框架中主键的生成策略有三种方式: 1,数 ...

  10. PC--CSS命名

    头:header内 容:container尾:footer导航:nav侧栏:sidebar栏目:column页 面外围控制整体布局宽度:wrapper左右中:left right center登录条: ...