标签:table after style http over order clr lock doctype
<!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
标签:table after style http over order clr lock doctype
原文地址:http://www.cnblogs.com/chenio/p/6094589.html