骨灰级解决办法:

.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. thinkphp导出csv文件,用表格输出excel

    1.thinkphp导出csv文件 导出csv文件可能就那几行代码,今天有个问题困扰我好久,就是导出之后出现一些html代码,这个不应该,view里面是空的,controller中最后也没有$this ...

  2. [EffectiveC++]item26:尽可能延后变量定义式的出现时间

  3. 学习博客之Java继承多态接口

    这一篇博客主要是对软工前一阶段学习的总结,主要是对Java的学习总结,包括三部分:Java的继承.多态和接口 Java的继承 继承是面向对象的三大特性之一,能够实现软件的复用. Java子类继承父类的 ...

  4. BZOJ 1066 蜥蜴 最大流

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1066 题目大意: 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥 ...

  5. Loj #2256. 「SNOI2017」英雄联盟

    题目 我就是个丝薄 如果要用\(dp_i\)表示凑出\(i\)的最小花费显然不可能的 之后大力猜想能凑出来的状态不会很多,我的暴力也告诉我不是很多,好像也确实不多的样子,大概\(4e4\)左右 但是我 ...

  6. [USACO19FEB]Moorio Kart

    题目 我们的神仙教练在考试里放了这道题,当时我非常惊讶啊 背包是\(O(n^3)\)的吧明明是带根号的好吧,那既然要优化的话 NTT!什么时候我们教练会在考试里放多项式了 模数\(1e9+7\)? 任 ...

  7. 1812: [Ioi2005]riv

    1812: [Ioi2005]riv Time Limit: 10 Sec Memory Limit: 64 MB Submit: 635 Solved: 388 [Submit][Status][D ...

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

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

  9. Day4 数组

    双重for循环 外循环控制行,内循环控制列. //乘法表 ; i <= ; i++) { ; j <= i ;j++) { System.out.print(j+"*" ...

  10. k8s1.8 ingress 配置

    kubectl create secret tls ingress-secret-fengjian --key /data/sslkey/cinyi.key --cert /data/sslkey/c ...