-_-#【清除浮动】
2012-07-24 17:52
127 查看
CSS 清除浮动的4种方法
更简洁的 CSS 清理浮动方式
更简洁的 CSS 清理浮动方式
1、
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { background-color: #FF0; } .box-bd { display: inline; float: left; width: 100px; height: 100px; margin-right: 100px; background-color: #F00; } .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="box-bd"></div> <div class="clear"></div> </div> 2 </body> </html>
2、
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { background-color: #FF0; } .box-bd { display: inline; float: left; width: 100px; height: 100px; margin-right:100px; background-color: #F00; } .box { float: left; } </style> </head> <body> <div class="box"> <div class="box-bd"></div> </div> 2 </body> </html>
3、
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { background-color: #FF0; } .box-bd { display: inline; float: left; width: 100px; height: 100px; margin-right: 100px; background-color: #F00; } .box { width: 100%; overflow: hidden; } </style> </head> <body> <div class="box"> <div class="box-bd"></div> </div> 2 </body> </html>
4、
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { background-color: #FF0; } .box-bd { display: inline; float: left; width: 100px; height: 100px; margin-right: 100px; background-color: #F00; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { zoom: 1; } </style> </head> <body> <div class="box clearfix"> <div class="box-bd"></div> </div> 2 </body> </html>
5、
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { background-color: #FF0; } .box-bd { display: inline; float: left; width: 100px; height: 100px; margin-right: 100px; background-color: #F00; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { zoom: 1; } </style> </head> <body> <div class="box cf"> <div class="box-bd"></div> </div> 2 </body> </html>
相关文章推荐
- 浅谈 CSS 清除浮动的 6 种方法(转)
- 利用overflow:hide清除“浮动”
- 浮动(float)和清除浮动
- JS之清除浮动
- 清除浮动 float
- CSS清除浮动常用的三种方法
- 页面布局中常用的清除浮动的方法
- css清除浮动float的三种方法总结
- 速记:清除浮动的三种方法
- css深入理解之folat浮动 4-1 清除浮动
- CSS浮动与清除浮动(overflow)例子
- 项目经验:clear清除浮动样式
- 清除浮动
- Web前端面试指导(十九):CSS样式-如何清除元素浮动?
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
- 网页css清除浮动方法
- 小谈CSS清除浮动
- 清除浮动的原理和方法
- CSS 6.2补充 清除浮动的方法
- ▲浅谈清除浮动