清除浮动的本质:
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 影响到下面布局的问题
在CSS中,clear属性用于清除浮动,其基本语法格式如下:
选择器 { clear:属性值; } |
属性值 | 描述 |
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
1.额外标签法
是w3c推荐的作法,是指在通过浮动元素的末尾添加一个空的标签,例如:
<div style="clear:both"></div>,或者是其他标签也可以
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差,影响代码可读性。
所以虽然是w3c推荐的标准,但是实际中我们一般不采用
详细代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; }.big { width: 100px; height: 200px; background-color: black; float: left; } .small { width: 80px; height: 80px; background-color: pink; float: left; } .footer { width: 400px; height: 100px; background-color: gray; } .clear { clear: both; /*如果清除了浮动, 父亲则会自动检测孩子的高度 以最高的为准*/ } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> <!-- 最后一个浮动标签的后面,新添加一个标签 清除浮动 --> <div class="clear"></div> </div> <div class="footer"></div> </body> </html> |
可以给父级添加: overflow为 hidden|auto|scroll 的属性都可以都可以实现。 |
优点:代码简洁
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow 清除浮动</title> <style> .father { border: 1px solid red; width: 300px; overflow: hidden; /* 记得给父亲添加该属性 */ } .big { width: 100px; height: 200px; background-color: black; float: left; } .small { width: 80px; height: 80px; background-color: pink; float: left; } .footer { width: 400px; height: 100px; background-color: gray; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html> |
使用方法:
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */ |
详细代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:after { /*正常浏览器 清除浮动*/ content:""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/ } .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 200px; background-color: black; float: left; } .small { width: 80px; height: 80px; background-color: pink; float: left; } .footer { width: 400px; height: 100px; background-color: gray; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html> |
这种方式采用的比较多, 推荐使用
使用方法:
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /* 此处是为了兼容IE6 IE7 */ } .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 200px; background-color: black; float: left; } .small { width: 80px; height: 80px; background-color: pink; float: left; } .footer { width: 400px; height: 100px; background-color: gray; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html> |
- The End -
联系作者:526459956@qq.com