方法一:添加新的元素 、应用 clear:both

.clear{
clear:both;
height:;
height:;
overflow:hidden;
}

方法二:父级div定义 overflow: auto

.over-flow{
overflow: auto;
zoom:; //处理兼容性问题
}

方法三: 伪类  :after 方法  outer是父div的样式

.outer {zoom:;}    /*==for IE6/7 Maxthon2==*/
.outer :after {
clear:both;
content:'.';
display:block;
width:;
height:;
visibility:hidden;
}

CSS3中三种清除浮动(float)的方法的更多相关文章

  1. CSS3中三种清除浮动(float)影响的方式

    float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0 ...

  2. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  3. 清除浮动float (:after方法)

    1. 什么时候需要清除浮动?清除浮动有哪些方法? (1)对元素进行了浮动(float)后,该元素就会脱离文档流,浮动在文档之上.在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是 ...

  4. css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  5. CSS3中为什么要清除浮动以及三种清除浮动(float)的方法

    方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height: 0; height: 0; overflow:hidden; } 方法二:父级div定义 o ...

  6. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  7. css清除浮动float的三种方法总结

    原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...

  8. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  9. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

随机推荐

  1. nyoj 黑色帽子

    黑色帽子 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述         最近发现了一个搞笑的游戏,不过目前还没玩过.一个舞会上,每个人头上都戴着一顶帽子,帽子只有黑 ...

  2. 《javascript设计模式与开发实践》阅读笔记(10)—— 组合模式

    组合模式:一些子对象组成一个父对象,子对象本身也可能是由一些孙对象组成. 有点类似树形结构的意思,这里举一个包含命令模式的例子 var list=function(){ //创建接口对象的函数 ret ...

  3. 易错点---所有的字符都自带bool值

    所有的字符都自带布尔值,只有0,None,空为False,其他全部为真!!!!!!!!!!! count = 0 while count < 3 : inp_age =input('Enter ...

  4. 让linux远程主机在后台运行脚本

    后台挂起:python xxx.py & 在脚本命令后面加入"&"符号就可以后台运行.结束进程:kill -9 sidps -ef | grep ... 查询sid

  5. PHP环境手动搭建wamp-----Apache+MySQL+PHP

    首先下载分别下载Apache+MySQL+PHP. 然后分别解压到文件夹中. 1.安装Apache 1)检查80端口是否占用 说明:apache软件占用80软件,在计算机中一个端口只能被一个软件占用 ...

  6. Python之旅.第四章.模块与包 4.02

    一.模块的使用之import 1 什么是模块?模块就一系统功能的集合体,在python中,一个py文件就是一个模块,比如module.py,其中模块名module2 使用模块2.1 import 导入 ...

  7. 我自己总结的C#开发命名规范整理了一份

    我自己总结的C#开发命名规范整理了一份 标签: 开发规范文档标准语言 2014-06-27 22:58 3165人阅读 评论(1) 收藏 举报  分类: C#(39)  版权声明:本文为博主原创文章, ...

  8. 2-51单片机WIFI学习(开发板测试远程通信详细介绍)

    前一篇链接(最后有APP安装包下载地址) http://www.cnblogs.com/yangfengwu/p/8720148.html 由于自己别的贴片的板子还没到,所以用自己的8266最小系统板 ...

  9. 老帖收藏,留供参考:SpringMvc2.5+Mybatis3.2.7

    一.项目背景 SpringMvc+Mybatis 数据库连接池是阿里巴巴的druid.日志框架式logback 二.配置文件 1.SpringMvc-servlet.xml <?xml vers ...

  10. Linux知识积累(3)$()和${}和$(())和(())

    $()和${}和$(())和(()) $()和${}的用法:在 bash shell 中,$( ) 与 ` ` (反引号) 都是用来做命令替换用(command substitution)的.而 $( ...