骨灰级解决办法:

.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. 我做SAP CRM One Order redesign的一些心得体会

    框架开发和应用程序的开发完全不一样. 举个具体的最近折腾我的例子: 创建新的service order,维护header的shipping data,此时order和shipping data的mod ...

  2. 通过golang 查询impala

    cloudera官方没有提供impala基于golang的驱动,github有github.com/bippio/go-impala package main import ( "conte ...

  3. Linux - Confluence搭建

    0. 摘要 Confluence自身携带内置数据库,对于生产环境建议搭建外置数据库,Confluence通过相应驱动连接上.并操作数据库.Confluence支持多种数据库,本文采用MySQL. 1. ...

  4. Spring源码分析(十五)获取单例

    本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 之前我们讲解了从缓存中获取单例的过程,那么,如果缓存中不存在已经加载的单例be ...

  5. $2018/8/15 = Day \ \ 1$杂题整理

    \(\mathcal{Morning}\) \(Task1\)高精度\(\times\)高精度 哦呵呵--真是喜闻乐见啊,我发现这一部分比较有意思于是就打算整理下来233.窝萌现在有一个整数\(A = ...

  6. POJ 2250 (LCS,经典输出LCS序列 dfs)

    题目链接: http://poj.org/problem?id=2250 Compromise Time Limit: 1000MS   Memory Limit: 65536K Total Subm ...

  7. OpenGL笔记(一) 绘制三角形

    GLTools: 一些有用且可复用的函数 GLEW: OpenGL API的一些扩展机制 GLUT: OpenGL Utility toolkit, OpenGL跨平台相关,隐藏平台相关细节 RC代表 ...

  8. [转载]AVFormatContext结构体详细分析

        AVFormatContext描述一个媒体文件或媒体流的构成和基本信息. 这是FFMpeg中最为基本的一个结构,是其他所有结构的根,是一个多媒体文件或流的根本抽象.其中nb_streams和s ...

  9. Property Injection in Asp.Net Core (转载)

    问: I am trying to port an asp.net application to asp.net core. I have property injection (using ninj ...

  10. Linux进程管理——fork()和写时复制

    写时复制技术最初产生于Unix系统,用于实现一种傻瓜式的进程创建:当发出fork(  )系统调用时,内核原样复制父进程的整个地址空间并把复制的那一份分配给子进程.这种行为是非常耗时的,因为它需要: · ...