清除浮动的七种方式方法(实例代码讲解)
2016-04-18 16:08
381 查看
实例代码(未清除浮动):
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>清除浮动方法大全</title> <link rel="stylesheet" href="reset.css"> <style> .main div { float: left; width: 200px; height: 200px; margin-right: 20px; background: #fcf; } .footer { width: 420px; height: 100px; background: red; } </style> </head> <body> <div class="wrap"> <div class="main"> <div>清除浮动方法大全</div> <div>html学习</div> </div> <div class="footer"></div> </div> </body> </html>
解析:页面开发的时候可以为父级标签添加固定高度,但是有时希望内容能够撑开高度(比如内容不固定的时候)。对于不浮动的元素来说,它们是能够撑开外部div的高度的,但是一旦浮动,元素脱离文档流,父级div就相当于没有了内容(上面的例子中类名为main的高度为0了)。这时是没有办法实现内容撑开高度的。此时需要进行清除浮动对布局造成的一系列影响,所以叫清浮动。(不要误解成把浮动清除了,元素就没有浮动了,不是同一概念)。
下面E良师益友网就为大家分析总结一下清除浮动的方法!
一:空标签清浮动
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>清除浮动方法大全</title> <link rel="stylesheet" href="reset.css"> <style> .main div { float: left; width: 200px; height: 200px; margin-right: 20px; background: #fcf; } .footer { width: 420px; height: 100px; background: red; } .clear { clear: both; /*消除默认行高的影响*/ height: 0; } </style> </head> <body> <div class="wrap"> <div class="main"> <div>清除浮动方法大全</div> <div>html学习</div> <p class="clear" 4000 ></p> </div> <div class="footer"></div> </div> </body> </html>
注释:上面用p标签进行空标签清浮动,当然可以用别的标签;如果用行元素的话需要进行转化为块,块元素就没有必要转化啦。
二:br标签清除浮动
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>清除浮动方法大全</title> <link rel="stylesheet" href="reset.css"> <style> .main div { float: left; width: 200px; height: 200px; margin-right: 20px; background: #fcf; } .footer { width: 420px; height: 100px; background: red; } </style> </head> <body> <div class="wrap"> <div class="main"> <div>清除浮动方法大全</div> <div>html学习</div> <!-- br标签自带的属性 --> <br clear="all" /> </div> <div class="footer"></div> </div> </body> </html>
三:父元素设置overflow:hidden
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>清除浮动方法大全</title> <link rel="stylesheet" href="reset.css"> <style> .main { overflow: hidden; } .main div { float: left; width: 200px; height: 200px; margin-right: 20px; background: #fcf; } .footer { width: 420px; height: 100px; background: red; } </style> </head> <body> <div class="wrap"> <div class="main"> <div>清除浮动方法大全</div> <div>html学习</div> </div> <div class="footer"></div> </div> </body> </html>
四:父元素设置overflow:auto
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>清除浮动方法大全</title> <link rel="stylesheet" href="reset.css"> <style> .main { overflow: auto; } .main div { float: left; width: 200px; height: 200px; margin-right: 20px; background: #fcf; } .footer { width: 420px; height: 100px; background: red; } </style> </head> <body> <div class="wrap"> <div class="main"> <div>清除浮动方法大全</div> <div>html学习</div> </div> <div class="footer"></div> </div> </body> </html>
五:父元素浮动
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>清除浮动方法大全</title> <link rel="stylesheet" href="reset.css"> <style> .main { float: left; } .main div { float: left; width: 200px; height: 200px; margin-right: 20px; background: #fcf; } .footer { width: 420px; height: 100px; background: red; } </style> </head> <body> <div class="wrap"> <div class="main"> <div>清除浮动方法大全</div> <div>html学习</div> </div> <div class="footer"></div> </div> </body> </html>
注释:使得与父元素相邻的元素的布局会受到影响(影响到了类名为footer的元素)。
六:父元素设置display:table
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>清除浮动方法大全</title> <link rel="stylesheet" href="reset.css"> <style> .main { display: table; } .main div { float: left; width: 200px; height: 200px; margin-right: 20px; background: #fcf; } .footer { width: 420px; height: 100px; background: red; } </style> </head> <body> <div class="wrap"> <div class="main"> <div>清除浮动方法大全</div> <div>html学习</div> </div> <div class="footer"></div> </div> </body> </html>
七:after 伪元素(不是伪类)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>清除浮动方法大全</title> <link rel="stylesheet" href="reset.css"> <style> .main div { float: left; width: 200px; height: 200px; margin-right: 20px; background: #fcf; } .footer { width: 420px; height: 100px; background: red; } .clearfix:after { clear:both; display:block; height:0; content:"\200B"; } .clearfix { *zoom:1; } </style> </head> <body> <div class="wrap"> <div class="main clearfix"> <div>清除浮动方法大全</div> <div>html学习</div> </div> <div class="footer"></div> </div> </body> </html>
相关文章推荐
- 清除浮动
- css别忘记清除浮动clear:both
- CSS清除浮动常用方法小结
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- html+css 清除浮动的相关技巧心得
- css为什么要清除浮动
- 对groupbox的一点点改进
- 解读浮动闭合最佳方案:clearfix
- div相互覆盖,div与div盒子之间产生重叠覆盖现象的解决办法
- 【css技术指南笔记】 第三章 盒子模型 浮动 清除浮动 定位 显示属性 背景
- CSS清除浮动的方法
- 整理关于css中position与float的一些用法
- 清除浮动(clear float)
- .clearfix:after(清除浮动)中各个属性及值详细解说
- CSS中常用的清除浮动(闭合浮动)的方法
- 关于:after和:before伪类的用法,以及让浮动占据高度问题。
- CSS 清除浮动的三种方式
- 没有清除浮动 图层被隐藏
- 清除浮动的几种方式
- CSS的overflow属性及清除浮动