清除浮動的四種方式
阿新 • • 發佈：2021-06-10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 父級新增after偽元素 方法 清除浮動 */ /* .clearfix::after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } */ /* IE6、7 */ /* .clearfix{ *zoom:1; } */ /* 父級新增雙偽元素 方法清除浮動 */ .clearfix:before,.clearfix:after{ content: ""; display: table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; } .box{ /* overflow 方法清除浮動 */ /* overflow: hidden; */ width: 800px; border: 1px solid red; margin: 0 auto; } .one{ float: left; width: 150px; height: 200px; background-color: plum; } .two{ float: left; width: 300px; height: 300PX; background-color: khaki; } .footer{ height: 200px; background-color: rosybrown; } /* 額外標籤法 */ /* .clear{ clear: both; } */ </style> </head> <body> <!-- 1 額外標籤法 2 父級新增overflow 3 父級新增after偽元素 4 父級新增雙偽元素 --> <div class="box clearfix"> <div class="one">one</div> <div class="two">two</div> <!-- 額外標籤法 注意 這個新增的盒子必須是塊級元素 --> <!-- <div class="clear"></div> --> </div> <div class="footer"></div> </body> </html>