清除浮動的方法
阿新 • • 發佈：2020-09-09
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> div.items { float: left; width: 100px; height: 100px; background-color: pink; border: 1px solid blue; margin: 5px; } div.container{ /*清除浮動法2 觸發BFC */ /* overflow: hidden; */ border: 2px solid black; } div.clear{ /* height: 0; */ clear: both; } /* 清除浮動法2 採用偽元素，這裡我們使用:after。新增一個類clearfix */ .clearfix:after { content: ''; display: table; /* 這個偽元素是行內元素，採用table而不是block此方法可以有效避免瀏覽器相容問題*/ clear: both; } </style> </head> <body> <div class="container clearfix"> <div class="items"></div> <div class="items"></div> <div class="items"></div> <!-- 清除浮動的方法 --> <!-- 1、新增冗餘元素並設定 clear: both; --> <!-- <div class="clear"></div> --> </div> </body> </html>