W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .img2 { float: right; } .clearfix::after { content: ""; clear: both; display: table; } </style> </head> <body> <h1>没有清除浮动</h1> <p>这张图片浮动在右侧。它的高度也超过了包含它的元素，因此它溢出了其容器的外部：</p> <div> <img class="img1" src="/i/photo/tulip.jpg" alt="Tulip" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> <h2 style="clear:right">使用新的现代清除浮动方法</h2> <p>将清除浮动的技巧添加到包含元素中，以解决此问题：</p> <div class="clearfix"> <img class="img2" src="/i/photo/tulip.jpg" alt="Tulip" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> </body> </html>