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. SQLite剖析之动态内存分配

    SQLite通过动态内存分配来获取各种对象(例如数据库连接和SQL预处理语句)所需内存.建立数据库文件的内存Cache.保存查询结果. 1.特性    SQLite内核和它的内存分配子系统提供以下特性 ...

  2. Ubuntu 16.04安装QQ国际版图文详细教程

            因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

  3. Sphinx在windows上的安装使用

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

  4. grails框架的g:paginate分页标签的使用

    我用到的grails是2.4.4. 该版本下游一个标签g:paginate 该标签下有以下几个参数:total(必须要填写的项).controller.action.prev.max.offset等等 ...

  5. .NET 微信Token验证和消息接收和回复

    public class wxXmlModel { public string ToUserName { get; set; } public string FromUserName { get; s ...

  6. AI贪吃蛇（二）

    前言 之前写过一篇关于贪吃蛇AI的博客,当时虽然取得了一些成果,但是也存在许多问题,所以最近又花了三天时间重新思考了一下.以下是之前博客存在的一些问题: 策略不对,只要存在找不到尾巴的情况就可能失败, ...

  7. 理解数据库的PDO处理的理念

    做第一份工作的时候,脑海里没有数据安全性的概念,从来没有网站被黑客盯上的事情.网站用户量也不大,虽然工作繁忙,但是只要代码上了线,基本上没有出过问题.在这个期间曾经做过一些傻的事情,认为sql写的越复 ...

  8. BZOJ1026: [SCOI2009]windy数

    传送门 md直接wa了78次,身败名裂 没学过数位DP硬搞了一道数位DP的模板题,感觉非常的愉(sha)悦(cha). 二分转化枚举思想.首先DP预处理出来$f[i][j]$表示有$i$位且第$i$位 ...

  9. ionic browser+ios头部高度显示问题

    ionic项目在使用ionic build browser或者打包ios时如果设置头部高度 方法如下 .bar-header { padding:; height:; } .scroll-conten ...

  10. zTree 循环树

    /// <summary> /// 初始化第一次节点加载 /// </summary> /// protected string _menu = string.Empty; p ...