CSS清浮动办法
骨灰级解决办法:
.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清浮动办法的更多相关文章
- CSS清浮动处理(Clear与BFC)
在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...
- css清浮动与动态计算元素宽度
css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...
- CSS清浮动
× 目录 [1]定义 [2]方法 [3]兼容 前面的话 人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题 定义 clear 清除 值: left | right | both | non ...
- CSS清浮动方法总结
浮动----会使当前标签产生上浮效果,从而导致父标签高度塌陷的问题 1. 给父元素指定高度 <div style="height:200px"> <div sty ...
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
- CSS浮动与清浮动
浮动 ( float css属性) float : left right Elements are floated horizontally, this means that an element c ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- 细微之处:比较两种CSS清除浮动的兼容
http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...
- float布局打破标准流,神助攻clear清浮动
布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...
随机推荐
- Aria2 无限制下载神器
Aria2 是一款免费开源跨平台且不限速的多线程下载软件,Aria2的优点是速度快.体积小.资源占用少:支持 HTTP / FTP / BT / Magnet 磁力链接等类型的文件下载:支持 Win. ...
- ajax跨域请求在IE8中存在的问题
从没打算怎么去兼容老版本IE,毕竟微软自己都放弃了,可是最近做好的东西在所有的IE下都会出问题:GetJson不执行 本来觉得挺简单的,度娘也给出了一大堆的解决方案,可惜,基本上都是在说缓存,实际上并 ...
- Latex排版全解
Latex排版全解 LATEX(英语发音:/ˈleɪtɛk/ LAY-tek或英语发音:/ˈlɑːtɛk/ LAH-tek,音译“拉泰赫”),是一种基于TEX的排版系统,由美国电脑学家莱斯利•兰伯特在 ...
- 整合Yolov3到游戏引擎
这篇其实是前文 CUDA版Grabcut的实现 的后续,和上文一样,先放视频. (博客园好像不支持视频,gif文件太大,视频链接) 在上文用CUDA实现opencv下的grabcut后,当时问题主要是 ...
- 【openjudge】【递推】例3.6 过河卒(Noip2002)
[题目描述] 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上的某一点有一个对方的马(如C点),该马所在的点和所有跳跃一步可达的点称为对方马的控制点,如图3-1 ...
- input框动态模糊查询,能输入,能选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript:apply方法 以及和call的区别 (转载)
javascript:apply方法 1. apply和call的区别在哪里 2. 什么情况下用apply,什么情况下用call 3. apply的其他巧 ...
- 集合之ArrayList
一.ArrayList概述 ArrayList是实现List接口的动态数组,所谓动态就是它的大小是可变的.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类 ...
- c++——初始化列表
多个对象构造和析构 1对象初始化列表 1)对象初始化列表出现原因 1.必须这样做: 如果我们有一个类成员,它本身是一个类或者是一个结构,而且这个成员它只有一个带参数的构造函数,没有默认构造函数.这时要 ...
- UCOS时钟节拍的讲究
其实这个值取适中即可,100,200都行,看你的片子是什么,Cortex-M3的片子取200较合适这个值太小,系统调度周期较长,各个任务之间切换较慢,适时性降低,而太大了,中断周期与调试周期接近了,那 ...