首页 > 代码库 > 前端布局之CSS清除浮动的六种方法
前端布局之CSS清除浮动的六种方法
在网页开发过程中经常会用到各种浮动，此时就需要及时清除浮动，不然会对后面的布局造成影响。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; background: yellow; width:300px; } .inner{ width: 50px; height: 50px; background-color: red; margin-right: 20px; float: left; } .footer{ background-color: blue; width: 200px; height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div> </body> </html>
我们都知道使用浮动会产生很多未知的问题，通过上面的例子我们可以发现 class="outer" 的高度并没有被里面的 div 给撑开，这是因为里面的 div 产生浮动而脱离了该文档，因为 outer本身没有高度，所以我们看不到它的黄色背景，看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上下边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下。
解决办法：
1.给父元素设置高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; background: yellow; width:300px; height: 100px; } .inner{ width: 50px; height: 50px; background-color: red; margin-right: 20px; float: left; } .footer{ background-color: blue; width: 200px; height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div> </body> </html>
此时可以看到outer DIV包住了inner DIV.
2.让父元素浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; background: yellow; float: left; } .inner{ width: 50px; height: 50px; background-color: red; margin-right: 20px; float: left; } .footer{ background-color: blue; width: 200px; height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div> </body> </html>
此时，由于其父元素outer也浮动了，从而脱离了文档流，所以footer DIV上升到了原来outer DIV 所在的位置。（注意几个DIV的大小）。
3.为父元素添加overflow：hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; background: yellow; width:300px; overflow:hidden; } .inner{ width: 50px; height: 50px; background-color: red; margin-right: 20px; float: left; } .footer{ background-color: blue; width: 200px; height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div> </body> </html>
实际上，overflow：hidden 的真正用途是防止包含元素被超大元素撑大，应用overflow：hidden 之后，多余的子元素内容会被容器剪切掉。从而迫使父元素包含住其浮动的子元素。
4.添加非浮动的清除元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; background: yellow; width:300px; } .inner{ width: 50px; height: 50px; background-color: red; margin-right: 20px; float: left; } .footer{ background-color: blue; width: 200px; height: 100px; } .clear{ clear: left; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="clear"></div> </div> <div class="footer"></div> </body> </html>
这种方法就是简单的在父元素中添加一个额外的标签，并给他应用clear属性、因为没有默认的样式，不会引入多余的空间，div 元素很适合用于这个目的、
5.用CSS来添加清除元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; background: yellow; width:300px; } .inner{ width: 50px; height: 50px; background-color: red; margin-right: 20px; float: left; } .footer{ background-color: blue; width: 200px; height: 100px; } .clear{ clear: left; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="clear"></div> </div> <div class="footer"></div> </body> </html>
这里是为outer DIV的元素内容后面添加一个不可见的内容。
这种方法在IE浏览器并不适用，因为 IE8以上才支持：after，对于IE6和IE7解决浮动问题可以在上述方法中添加如下代码：
.clearfix{
zoom:1;
}
6.父元素绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; background: yellow; width:300px; position: absolute; } .inner{ width: 50px; height: 50px; background-color: red; margin-right: 20px; float: left; } .footer{ background-color: blue; width: 200px; height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div> </body> </html>
这种方法是在一篇文章中看到的。由于水平有限，暂时没有理解。
前端布局之CSS清除浮动的六种方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。