<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>12-清除浮动</title> <style> /* 2.1设置外面的盒子 */ .box { 210px; border: 1px solid black; /* 清除浮动 产生的原因:父元素没有设置高度, 子元素浮动 1.设置overflow:hidden; 2.新增一个空的div标签,设置clear:both; 3.使用伪类, 一般都使用这种 */ /* 如果元素浮动了, 垂直外边不会合并 */ /* overflow: hidden; */ } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { /* 适配低版本的IE浏览器 */ zoom: 1; } .last { /* clear: both; */ } /* 2.2设置里面的小盒子 */ .smallbox { 50px; height: 50px; background-color: gold; margin: 10px; /* 浮动 */ float: left; } </style> </head> <body> <!-- 1.搭建界面 --> <!-- div.box>(div.smallbox{盒子$}*8) --> <div class="box clearfix"> <div class="smallbox">盒子1</div> <div class="smallbox">盒子2</div> <div class="smallbox">盒子3</div> <div class="smallbox">盒子4</div> <div class="smallbox">盒子5</div> <div class="smallbox">盒子6</div> <div class="smallbox">盒子7</div> <div class="smallbox">盒子8</div> <div class="last"></div> </div> </body> </html>