首页 > 代码库 > 清除浮动
清除浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>额外添加标签</title> <style> .box{ width: 300px; border: 1px solid #000; } .one{ width: 150px; height: 200px; background-color: pink; float: left; } .two{ width: 150px; height: 200px; background-color: blue; float: left; } .box2{ height: 150px; width: 300px; background-color: orange; } .clr{ clear: both; } </style></head><body> <div class="box"> <div class="one"></div> <div class="two"></div> <div class="clr"></div> </div> <div class="box2"></div></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪元素</title> <style> .box{ width: 300px; border: 1px solid #000; } .one{ width: 150px; height: 200px; background-color: pink; float: left; } .two{ width: 150px; height: 200px; background-color: blue; float: left; } .box2{ height: 150px; width: 300px; background-color: orange; } .clearfix:after{ display: block; overflow: hidden; visibility: hidden; height: 0; content: ‘‘; clear: both; } .clearfix{ zoom:1; } </style></head><body> <div class="box clearfix"> <div class="one"></div> <div class="two"></div> <div class="clr"></div> </div> <div class="box2"></div></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双伪元素</title> <style> .box{ width: 300px; border: 1px solid #000; } .one{ width: 150px; height: 200px; background-color: pink; float: left; } .two{ width: 150px; height: 200px; background-color: blue; float: left; } .box2{ height: 150px; width: 300px; background-color: orange; } .clearfix:after, .clearfix:before{ display: table; overflow: hidden; height: 0; content: ‘‘; clear: both; } .clearfix{ zoom:1; } </style></head><body> <div class="box clearfix"> <div class="one"></div> <div class="two"></div> <div class="clr"></div> </div> <div class="box2"></div></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>BFC</title> <style> .box{ width: 300px; border: 1px solid #000; overflow: hidden; } .one{ width: 150px; height: 200px; background-color: pink; float: left; } .two{ width: 150px; height: 200px; background-color: blue; float: left; } .box2{ height: 150px; width: 300px; background-color: orange; } </style></head><body> <div class="box"> <div class="one"></div> <div class="two"></div> </div> <div class="box2"></div></body></html>
https://my.oschina.net/cz0/blog/791711
清除浮动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。