骨灰级解决办法:

.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. 本地YUM源制作

    YUM相关概念 什么是YUM YUM(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管 ...

  2. 洛谷 P2764 最小路径覆盖问题【最大流+拆点+路径输出】

    题目链接:https://www.luogu.org/problemnew/show/P2764 题目描述 «问题描述: 给定有向图G=(V,E).设P 是G 的一个简单路(顶点不相交)的集合.如果V ...

  3. SOJ1022 Uniform Generator

    Computer simulations often require random numbers. One way to generate pseudo-random numbers is via ...

  4. 【bzoj 4066】 简单题

    题目 显然这就是让我们在二维上数个点 如果没有强制在线就随便做啦,扫描线+主席树应该是最好的选择 但是现在强制在线并且卡了树套树的空间,于是只能上\(kdt\)了 我们还是维护一下每个子树分割出来的矩 ...

  5. Java并发编程--4.Executor框架

    简介 Executor框架是启动,管理线程的API, 它的内部实现是线程池机制,它有很多好处,比如使任务提交和任务执行解耦合,防止this逃逸:它的主要API包括: Executor,  Execut ...

  6. filebeat+logstash+elasticsearch收集haproxy日志

    filebeat用于是日志收集,感觉和 flume相同,但是用go开发,性能比较好 在2.4版本中, 客户机部署logstash收集匹配日志,传输到 kafka,在用logstash 从消息队列中抓取 ...

  7. Redis的Pub/Sub客户端实现

    前言   在学习T-io框架,从写一个Redis客户端开始一文中,已经简单介绍了Redis客户端的实现思路,并且基础架构已经搭建完成,只不过支持的命令不全,不过后期在加命令就会很简单了.本篇就要实现P ...

  8. NSPredicate的使用

    简述 NSPredicate谓词条件过滤器,一般用于过滤数组数据,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取. 常用函数 创建谓词 + (NSPredicate *)predic ...

  9. 记一次js之button问题

    问题描述:记得某天,发现一件让我非常气愤的事情,居然因为一个按钮导致页面跳转失败或者是根本跳转不了界面,哪怕404也不给我报. 问题回现步骤: (1)正常输入url localhost:8080/te ...

  10. Asp.Net写入读取Xml(处理文件权限)

    1,网上关于读取写入Xml的博客比较多,参考了发现提到Xml文件权限的博客比较少.因为在开发中我发现,如果文件存于一些没有权限的路径,代码是访问不到该文件,页面会报错提示403,Forbidden.意 ...