主页
CSS
CSS 布局 clear clearfix
trycss_layout_clearfix2
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .clearfix::after { content: ""; clear: both; display: table; } .img2 { float: right; } </style> </head> <body> <p>在这个例子中，图像比包含它的元素高，而且它是浮动的，所以它溢出了它的容器：</p> <div> <h2>不使用 Clearfix</h2> <img class="img1" src="pineapple.jpg" alt="菠萝" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum... </div> <p style="clear:right">将 clearfix hack 添加到包含元素，以解决此问题：</p> <div class="clearfix"> <h2>使用 Clearfix</h2> <img class="img2" src="pineapple.jpg" alt="菠萝" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum... </div> </body> </html>