骨灰级解决办法:

.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. linux_bc命令

    bc 命令:     bc 命令是用于命令行计算器. 它类似基本的计算器. 使用这个计算器可以做基本的数学运算. 语法:  语法是      bc [命令开关]命令开关:      -c 仅通过编译. ...

  2. redis-Sentinel配置

    Sentinel介绍 Redis的主从模式下,主节点一旦发生故障不能提供服务,需要人 工干预,将从节点晋升为主节点,同时还需要修改客户端配置. 对于很多应用场景这种方式无法接受. Redis从 2.8 ...

  3. BZOJ3667:Rabin-Miller算法(Pollard-Rho)

    Description Input 第一行:CAS,代表数据组数(不大于350),以下CAS行,每行一个数字,保证在64位长整形范围内,并且没有负数.你需要对于每个数字:第一,检验是否是质数,是质数就 ...

  4. hacknet

    网盘下载地址,下载后cmd运行hacknet.exe 链接:https://pan.baidu.com/s/1gTrcuDRzDhepFlXhsOMVlg 提取码:os9v 经过5个小时的战斗,终于通 ...

  5. http 的request和response 在servlet的应用文件下载

    一)response 我们通过浏览器访问网站的时候,处理响应的是response. 它由三部门组成:响应行.响应头.响应体 作用:往浏览器写东西. 1)响应行 格式:协议/版本  状态码 状态码说明. ...

  6. 知乎live考研数学冲刺135+资料分享

    前言 各位学弟学妹,您好,live中本来是给出了我的邮箱,通过邮箱来获取资料,但是没有想到,后来我每天打开邮箱,都是需要回复的邮件,少则一两封,多则四五封,每天如此,也是一个比较繁琐费时的方式.我决定 ...

  7. IE8 下处理select标签高度不居中

    IE8:          Chrome:   同样的代码可是在IE8下select的文字并不是垂直居中. 处理:给select的样式添加padding上下的内边距. 加line-height一点用都 ...

  8. Using 1.7 requires compiling with Android 4.4 (KitKat); currently using

    今天编译一个project,我设置为api 14,可是编译报错: Using 1.7 requires compiling with Android 4.4 (KitKat); currently u ...

  9. Struts2 的ActionContext 详解

    转自:http://www.cnblogs.com/shaohz2014/p/3962779.html ActionContext是Action的上下文,Struts2自动在其中保存了一些在Actio ...

  10. 2.高并发教程-基础篇-之nginx+mysql实现负载均衡和读写分离

    技巧提示:mysql读写分离搭建好之后,配合nginx的负载均衡,可以高效的mysql的集群性能,同时免去麻烦的query分流.比如,sever1收到的请求就专门链接slave1从mysql读取数据, ...