DIV+CSS 清除浮动是页面布局中常见的问题，相信各位高手也都有自己的方法，今天在这里对常见的几种方法进行总结（PS：谈不上是原创，这里是我自己做的归纳总结，也是我自己内化的过程），希望对您能够有所帮助。感谢博客园平台！---- 来自<一只有梦想的前端小白>

DIV+CSS 浮动效果是指，父元素在未定义高的情况下，由于子元素全部浮动脱离文本流，而造成父元素高的塌陷（PS:正常情况下，父元素的高是由子元素撑起来）；或者因为部分子元素的而浮动，脱离文本流而造成其他元素的布局错乱的情况。

DIV+CSS 清除浮动 常见的方法如下：

1、给未加浮动的子元素的CSS添加 clear: both;若子元素都有浮动时，可以新增加一个空的子元素，并且给其的CSS添加 clear: both;这样可以利用清除左右浮动的子元素重新撑起父元素的高，从而达到清除浮动的效果。代码及效果如下：

<style type="text/css">

.fl{float:left;}

.demo{background:#ccc;}

.item1{background:#F571E3;height:100px;width:100px;}

.item2{background:#21B2F7;height:200px;width:100px;clear: both;}

</style>

</head>

<body>

    <h2>用 clearfix 清除浮动</h2>

    <div class="demo">

        <div class="fl item1"></div>

        <div class="item2"></div>

    </div>

</body>

清除浮动前，item1左浮动的效果（此时父元素的高是被未浮动的item2元素的高撑开）：

清除浮动前，item1右浮动的效果（此时父元素的高是被未浮动的item2元素的高撑开）：

清除浮动后的效果（因为DIV是块级元素，会独占一行，所以item2会在下面一行，此时父元素的高是被item1元素和item2元素的高撑开）：

2、子元素全部浮动时，给父元素的CSS添加 overflow: hidden;（子元素没有全部浮动时，不浮动的元素会撑开父元素的高，但是由于浮动元素造成的布局应该再利用padding进行修改），但是此方法父元素不能改使用position进行定位，否则不起作用。代码及效果如下：

<style type="text/css">

.fl{float:left;}

.demo{background:#ccc;overflow: hidden;}

.item1{background:#F571E3;height:100px;width:100px;}

.item2{background:#21B2F7;height:200px;width:100px;}

</style>

</head>

<body>

    <div class="demo">

        <div class="fl item1"></div>

        <div class="fl item2"></div>

    </div>

</body>

清除浮动前的效果，由于父元素的高塌陷，所以背景 background:#ccc; 没有起效果：

清除浮动后的效果：

3、给父元素加 伪类:after 和 zoom，代码及效果如下：

<style type="text/css">

.fl{float:left;}

.demo{background:#ccc;zoom: 1;}

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

.item1{background:#F571E3;height:100px;width:100px;}

.item2{background:#21B2F7;height:200px;width:100px;}

</style>

</head>

<body>

    <div class="demo">

        <div class="fl item1"></div>

        <div class="fl item2"></div>

    </div>

</body>

清除浮动前的效果，由于父元素的高塌陷，所以背景 background:#ccc; 没有起效果：

清除浮动后的效果：

4、如果是在使用bootstrapt，则可以给其父元素添加class 为 clearfix 的类，代码及效果如下：

<style type="text/css">

.fl{float:left;}

.demo{background:#ccc;}

.item1{background:#F571E3;height:100px;width:100px;}

.item2{background:#21B2F7;height:200px;width:100px;}

</style>

</head>

<body>

    <div class="demo clearfix">

        <div class="fl item1"></div>

        <div class="fl item2"></div>

    </div>

</body>

清除浮动后的效果：

以上方法各有利弊，大家可以根据自己的理解选择使用，还有一些其他的清除浮动的方法，例如让父元素浮动、让父元素 display:table 等等其他，个人并不推荐使用。

DIV+CSS 清除浮动方法总结的更多相关文章

  1. DIV+CSS清除浮动方法

    一.为什么要清除浮动? 1>父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(正常情况下,父元素的高是由未浮动的子元素撑起来) 2>因为部分子元素的而浮动,脱离 ...

  2. CSS清除浮动方法集合

    CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...

  3. css清除浮动方法大全

    清除浮动这个问题,做前端的应该再熟悉不过了,也是每一个web前台设计师 必须掌握的机能. 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width ...

  4. CSS清除浮动方法总结

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...

  5. css清除浮动方法小结

    清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素 ...

  6. div+css清除浮动代码

    <style type="text/css"> .div1{ background:#000080; border:1px solid red;} .div2{ bac ...

  7. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  8. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  9. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

随机推荐

  1. RSVP协议的基本概念介绍

    2010-06-12 14:12 佚名 互联网 字号:T | T 对于RSVP协议的简单介绍和图解.通过文章,我们将对这个含义的基本概念和结构,以及工作方式等方面的知识有所了解.希望对大家有所帮助. ...

  2. no result defined for action

    1.no result defined for action .......and result input    或者 no result defined for action .......and ...

  3. 谈一谈IOC、DI

    Inversion of control(控制反转) 原来由类库主动去创建对象的方式变为容器装配的方式,装配的方式:设置配置文件. 对象由IOC容器管理,包括创建.释放.存在形式.生命周期的管理等. ...

  4. 冰冻三尺非一日之寒-socket

    第八章 Socket语法及相关 SocketServer实现多并发 socket概念: 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket又称&q ...

  5. Sphinx在windows上的安装使用

    Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索, 它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索. Sphinx特别为一 ...

  6. Python笔记（1）变量与表达式

    列表list list是用的最多的类型 可以count计数 可嵌套,多钟类型并存 支持 + * a = [1,2,3] a_ref = a a_copy = a[:] 引用,a变化a_ref也变化 指 ...

  7. bzoj4462: [Jsoi2013]编程作业

    KMP还是有点用处的嘛qwq 对于小写字母,修改其为前一个这个小写字母和它的距离 然后跑KMP就行了 跑得飞快 #include <iostream> #include <cstdi ...

  8. python远程连接paramiko 模块和堡垒机实现

    paramiko使用 paramiko模块是基于python实现了SSH2远程安全连接,支持认证和密钥方式,可以实现远程连接.命令执行.文件传输.中间SSH代理功能 安装 pip install pa ...

  9. Java 内存管理

    java 内存管理机制 JAVA 内存管理总结 java 是如何管理内存的 Java 的内存管理就是对象的分配和释放问题.(两部分) 分配 :内存的分配是由程序完成的,程序员需要通过关键字 new 为 ...

  10. python中文分词：结巴分词

    中文分词是中文文本处理的一个基础性工作,结巴分词利用进行中文分词.其基本实现原理有三点: 基于Trie树结构实现高效的词图扫描,生成句子中汉字所有可能成词情况所构成的有向无环图(DAG) 采用了动态规 ...