返回

巧用五种方法清除浮动 让你页面布局随心所欲

前端

01 概述
浮动元素会脱离文档流，导致其所在的父元素无法撑开，这就是经常提到的“高度塌陷”问题。解决这一问题的常见方法包括clearfix、overflow、margin、padding和column，本文将一一进行介绍。

02 clearfix
clearfix方法是专门针对浮动布局而提出的，可通过伪元素来添加额外的块级元素，实现清除浮动效果。操作步骤如下：

  1. 在父元素中添加overflow: hidden;样式。
  2. 在父元素中添加一个伪元素::after，并设置content: ""; display: block; clear: both;样式。

具体代码如下：

.parent {
  overflow: hidden;
}

.parent::after {
  content: "";
  display: block;
  clear: both;
}

03 overflow
overflow方法是通过设置父元素的overflow属性为hidden或scroll来清除浮动。因为当overflow设置为hidden或scroll时，父元素会产生一个额外的高度来容纳浮动元素，从而解决高度塌陷问题。

.parent {
  overflow: hidden;
}

或

.parent {
  overflow: scroll;
}

04 margin
margin方法是通过设置浮动元素的下边距为负值来清除浮动，但这种方法只适用于父元素具有固定高度的情况。

.float {
  float: left;
  margin-bottom: -10px;
}

05 padding
padding方法是通过设置浮动元素的内边距来清除浮动，类似于margin方法，但适用于父元素具有不定高度的情况。

.float {
  float: left;
  padding-bottom: 10px;
}

06 column
column方法是通过设置父元素为多列布局来清除浮动，这种方法适用于需要进行多列布局的情况。

.parent {
  column-count: 2;
}

07 总结
总而言之，解决高度塌陷问题的方法有很多，选择合适的方法需根据具体情况来定。若需要了解更详细的内容，可以参考以下资源：