方法一:添加新的元素 、应用 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. recompose mapProps

    mapProps介绍 mapProps函数接收一个函数参数,这个函数参数会返回一个对象用作为接下来的组件的props.组件接收到的props只能是通过mapProps函数参数返回的对象,其他的prop ...

  2. 新手入门 git

    Git是目前世界上最先进的分布式版本控制系统 特点:高端大气上档次 什么是版本控制系统 系统自动记录文件改动 方便同事协作管理 不用自己管理一堆类似的文件了,也不需要把文件传来传去.如果想查看某次改动 ...

  3. kali rolling更新源之gpg和dirmngr问题

    1.编辑 /etc/apt/source.list gedit /etc/apt/sources.list 输入更新源,可以选任何可用更新源,这里设置官方源 deb http://http.kali. ...

  4. AngularJS1.X学习笔记7-过滤器

    最近参加笔试被虐成狗了,感觉自己的算法太弱了.但是还是先花点事件将这个AngularJS学习完.今天学习filter 一.内置过滤器 (1)过滤单个数据值 <!DOCTYPE html> ...

  5. 阿里云API网关(13)请求身份识别:客户端请求签名和服务网关请求签名

    网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...

  6. 新概念英语(1-1)Excuse me!

    Excuse me!Whose handbag is it? A:Excuse me! B:Yes? A:Is this your handbag? B:Pardon? A:Is this your ...

  7. 新概念英语(1-67)The weekend

    新概念英语(1-67)The weekend What are the Johnsons going to do at the weekend? A:Hello. Were you at the bu ...

  8. Spring Security入门(3-2)Spring Security对接用户的权限系统

    源文链接,多谢作者的分享: http://www.360doc.com/content/14/0727/16/18637323_397445724.shtml 1.原生的spring-security ...

  9. VS2013 堆栈溢出调查(0xC00000FD: Stack overflow)

    在调试一个代码时,执行过程中会出现如下错误(0xC00000FD: Stack overflow). 很明显是堆栈溢出了. 网上很多方法,都是通过修改设置工程配置,把堆栈调大一些,如下图. 但是堆栈到 ...

  10. Lumen框架搭建指南

    新人从java转php,到新公司搭建lumen框架,lumen官方文档的坑不是一般的多,对新手极其不友好,记录下我搭建过程,希望对小白们有所帮助. 首先看下官方文档:https://lumen.lar ...