在前端开发中,使用float浮动常常让几个快级元素一行排列,不过浮动后会出现高度塌陷问题,以下是解决浮动带来的高度塌陷的问题。建议使用的清除浮动的四种方法。
如下图所视,子元素使用浮动后,父元素没被撑开。
<div class="box"> <div>盒子1</div> <div>盒子2</div> <div>盒子3</div> </div>
|
*{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 1200px; border: 1px solid red; } .box>div{ width: 150px; height: 100px; border: 1px solid blue; text-align: center; line-height: 100px; float: left; }
|
方法一
给父级元素添加高度
*{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 1200px; height: 200px; border: 1px solid red; } .box>div{ width: 150px; height: 100px; border: 1px solid blue; text-align: center; line-height: 100px; float: left; }
|
方法二
给父级元素添加overflow: hidden;或者overflow: auto; ,跟随子元素的高度
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 优点:简单、代码少、浏览器支持好 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
|
*{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 1200px; border: 1px solid red; overflow: hidden; } .box>div{ width: 150px; height: 100px; border: 1px solid blue; text-align: center; line-height: 100px; float: left; margin-right: 10px; }
|
方法三
在需要清除浮动的后面添加一个空盒子,使用 clear: both;清除浮动。不建议使用。
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的 html元素,代码不够优雅,后期不容易维护。
<div class="box"> <div class="sm">盒子1</div> <div class="sm">盒子2</div> <div class="sm">盒子3</div> <div class="clear"></div>
</div>
|
*{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 600px; border: 1px solid red;
} .sm{ width: 150px; height: 100px; border: 1px solid blue; text-align: center; line-height: 100px; float: left; margin-right: 10px; } .clear{ clear: both; }
|
方法四
给父级div定义 伪类:after
*{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 600px; border: 1px solid red;
} .box::after{ content: ""; display: block; clear: both;
} .sm{ width: 150px; height: 100px; border: 1px solid blue; text-align: center; line-height: 100px; float: left; margin-right: 10px; }
|