在前端开发中,我们经常会使用浮动来实现元素的布局,但浮动也会带来一些问题,比如父元素高度塌陷、子元素位置错乱等问题。那么,如何清楚浮动呢?下面介绍几种方法。一、使用clear属性清除浮动clear属性
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="clearfix"></div> <!-- 清除浮动 --> </div> <style> .clearfix { clear: both; height: 0; overflow: hidden; } </style>
<div class="parent"> <div class="child"></div> <div class="child"></div> </div> <style> .parent { overflow: hidden; // 清除浮动 } </style>
<div class="parent"> <div class="child"></div> <div class="child"></div> </div> <style> .parent::after { // 伪元素清除浮动 content: ""; display: block; clear: both; } </style>
粉丝
0
关注
0
收藏
0