为何要清除浮动
父级元素有时不方便给高度,子级元素浮动就会影响父级元素下的其他标准流的布局
-
浮动子元素与其父元素
父元素没有设置高度时,标准流下子元素会撑开父元素,但是当子元素浮动时子元素不会占用父元素的高度,则父元素高度为0,父元素下的标准流元素就会占据原本要给子元素留的空间 —— 子元素会遮挡住原本在他下方的标准流元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .box1 { background-color: blue; } .box1 div{ float: left; width: 400px; height: 400px; } .d1 { background-color: red; } .d2 { background-color: green; } .box2 { background-color: black; width: 900px; height: 500px; } </style> </head> <body> <div class="box1"> <div class="d1"></div> <div class="d2"></div> </div> <div class="box2"></div> </body> </html>
-
清除浮动的本质
解决有高度子元素浮动时父元素高度为0的问题。清除浮动后父元素会被浮动的子元素撑开
清除浮动的方式
-
添加额外标签法
通过在浮动元素的末尾添加一个空标签例如
<div style="clear:both"></div>
用来清除浮动优点:通俗易懂,书写方便
缺点:添加许多无意义标签,结构化差<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .clear { clear: both; } .box1 { width: 900px; background-color: blue; } .d1, .d2{ float: left; width: 400px; height: 400px; } .d1 { background-color: red; } .d2 { background-color: green; } .box2 { background-color: black; width: 900px; height: 500px; } </style> </head> <body> <div class="box1"> <div class="d1"></div> <div class="d2"></div> <div class="clear"></div> </div> <div class="box2"></div> </body> </html>
-
给父标签添加
overflow:
属性overflow
属性规定当内容溢出元素框时发生的事情。(overflow还未具体学习到,之后更新)
当overflow
属性为overflow:hidden
、overflow:auto
、overflow:scroll
时都可以清除浮动优点:代码简洁
缺点:子元素增多时不会自动换行,会被隐藏,无法显示需要溢出的元素。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*.clear {*/ /* clear: both;*/ /*}*/ .box1 { width: 900px; background-color: blue; overflow: auto; } .d1, .d2{ float: left; width: 400px; height: 400px; } .d1 { background-color: red; } .d2 { background-color: green; } .box2 { background-color: black; width: 900px; height: 500px; } </style> </head> <body> <div class="box1"> <div class="d1"></div> <div class="d2"></div> <!-- <div class="clear"></div>--> </div> <div class="box2"></div> </body> </html>
-
使用after伪元素清除浮动(伪元素还未学习,以后更新)
为额外标签法的升级版
代表:淘宝、百度、网易优点:易于看懂结构(没有多余标签)
缺点:ie7及以下老版本浏览器不支持:after
,需要用*zoom:1
触发hasLayout<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { /*ie6,ie7专用*/ *zoom:1; } /*.clear {*/ /* clear: both;*/ /*}*/ .box1 { width: 900px; background-color: blue; /*overflow: auto;*/ } .d1, .d2{ float: left; width: 400px; height: 400px; } .d1 { background-color: red; } .d2 { background-color: green; } .box2 { background-color: black; width: 900px; height: 500px; } </style> </head> <body> <div class="box1 clearfix"> <div class="d1"></div> <div class="d2"></div> <!-- <div class="clear"></div>--> </div> <div class="box2"></div> </body> </html>
-
使用双伪元素清除浮动(未学习原理,以后更新)
伪元素简化版
代表:小米、腾讯优点:代码更简洁
缺点:ie7及以下老版本浏览器不支持:after
,需要用*zoom:1
触发hasLayout<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { /*ie7及以下专用*/ *zoom:1; } .box1 { width: 900px; background-color: blue; /*overflow: auto;*/ } .d1, .d2{ float: left; width: 400px; height: 400px; } .d1 { background-color: red; } .d2 { background-color: green; } .box2 { background-color: black; width: 900px; height: 500px; } </style> </head> <body> <div class="box1 clearfix"> <div class="d1"></div> <div class="d2"></div> </div> <div class="box2"></div> </body> </html>