源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> <style> div { border: 3px solid #73AD21; } .img1 { float: right; } .clearfix::after { content: ""; clear: both; display: table; } .img2 { float: right; } </style> </head> <body> <p>在这个例子中，图像比包含它的元素高，并且它是浮动的，所以它溢出容器的外部:</p> <div><img class="img1" src="w3css.gif" alt="W3Schools.com" width="100" height="140"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div> <p style="clear:right">添加clearfix解决包含元素，来解决这个问题:</p> <div class="clearfix"><img class="img2" src="w3css.gif" alt="W3Schools.com" width="100" height="140"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div> </body> </html>
运行结果