骨灰级解决办法:

.clear{clear:both;height:0;overflow:hidden;}

  

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。

最优浮动闭合方案(这是我们推荐的):

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

  

用法很简单,在浮动元素的父云素上添加class=”demo clearfix”。

你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}

  

以上写法就避免了改变html结构,直接用css解决了。

很拉轰的浮动闭合办法:

.clearfix{overflow:auto;_height:1%}

  

这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的,测试通过:

.clearfix{overflow:hidden;_zoom:1;}

  

感谢radom提供的这种方法!!

CSS清浮动办法的更多相关文章

  1. CSS清浮动处理(Clear与BFC)

    在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...

  2. css清浮动与动态计算元素宽度

    css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...

  3. CSS清浮动

    × 目录 [1]定义 [2]方法 [3]兼容 前面的话 人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题 定义 clear 清除 值: left | right | both | non ...

  4. CSS清浮动方法总结

    浮动----会使当前标签产生上浮效果,从而导致父标签高度塌陷的问题 1. 给父元素指定高度 <div style="height:200px"> <div sty ...

  5. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  6. CSS浮动与清浮动

    浮动 ( float css属性) float : left right Elements are floated horizontally, this means that an element c ...

  7. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  8. 细微之处:比较两种CSS清除浮动的兼容

    http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...

  9. float布局打破标准流,神助攻clear清浮动

    布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...

随机推荐

  1. ZT 安卓手机的安全性 prepare for Q

    如何增强安卓手机的安全性?安卓的安全性太低了!!! 众所周知,安卓手机是非常容易破解的,刷过机的人都知道,不管你之前在手机怎么设置密码,只要进入recovery清空使用记录,手机就会恢复出厂设置,到时 ...

  2. 映射函数map

    映射函数map 语法: map(function, iterable) 迭代对象中 的每一个元素进行映射, 分别执行function函数 例子:  ls =[1,2,3,4,5,6] def func ...

  3. [转] 29个你必须知道的Linux命令

    总结: 1. find  查找文件 2. grep 查找某个文件或者文件夹里面文件的内容 29个你必须知道的Linux命令 虽然Linux发行版支持各种各样的GUI(graphical user in ...

  4. Jupyter Notebook的使用

    命令模式 (按键 Esc 开启) Enter : 转入编辑模式 Shift-Enter : 运行本单元,选中下个单元 Ctrl-Enter : 运行本单元 Alt-Enter : 运行本单元,在其下插 ...

  5. 虚机的SQL Server空间占满之后进行释放的一些操作

    用了好几年的一个虚机,数据库是SQL Server 2008,配额500M. 今天忽然发现无法录入数据,登录后台一看,原来是数据库容量满了. 很久没用SQL Server了,找到一段之前用过的收缩数据 ...

  6. Linux - 常用归档、压缩命令

    1. ncompress compress命令是一个相当古老的 unix 档案压缩指令,压缩后的文件会加上一个 .Z 的后缀名,默认不会保留源文件.compress只能对文件进行压缩,若要压缩目录,先 ...

  7. CVE-2017-8046 复现与分析

    环境搭建 使用的项目为https://github.com/spring-guides/gs-accessing-data-rest.git里面的complete,直接用IDEA导入,并修改pom.x ...

  8. 企业案例 【故障修复】mysql主从故障解决过程

    由于配置有zabbix监控,某日收到zabbix监控主从报警,,查看mysql状态, showslave status \G; slave复制状态有误,SLAVE_SQL_RUNNING为NO, 接着 ...

  9. Linux 查看网卡流量的几个方法

    1. sar -n DEV 1 2   (命令后面1 2 意思是:每一秒钟取1次值,取2次.) 2. cat /proc/net/dev 3. iftop 4. ifstat 5. nload 6.  ...

  10. 两个Integer比较大小需要注意的误区

    通过下面的例子,来了解integer比较大小需注意的几点. eg.定义Integer对象a和b,比较两者结果为:a不等于b Integer a = 1; Integer b = 1; if(a==b) ...