统一清除浮动方法 - CSS Reset

在前端开发中，页面布局排版经常需要用到浮动，但是使用浮动可能会出现父元素高度塌陷等问题，为了解决这些问题，我们需要使用清除浮动的方法，本文将介绍一种较为常用和可靠的 CSS Reset 方式。

什么是 CSS Reset

CSS Reset 是一种为统一浏览器的默认样式而编写的 CSS 文件，它可以帮助我们消除浏览器的默认样式，保证页面在不同浏览器中的一致性。

CSS Reset 的主要目的就是消除浏览器默认的外边距和内边距，消除默认的列表项样式，统一浏览器的样式。

如何清除浮动

使用 CSS Reset 可以有效消除浮动造成的各种布局问题，但是清除浮动还需要使用相关的 CSS 属性和方法。以下是一些常见的清除浮动方法：

1. 父元素使用 clearfix

这种方法的原理就是在父元素上使用 clearfix 类或伪类清除浮动，这样可以保证父元素包含浮动元素，避免出现高度塌陷问题。

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

在页面中使用时，只需要给父元素添加 clearfix 类即可：

<div class="parent clearfix">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

2. 子元素使用 clear

这种方法是在每个浮动的子元素之后添加一个空标签，并设置 clear 属性来清除浮动。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

在页面中使用时，只需要在每个浮动子元素之后添加一个空标签即可：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="clear"></div>
</div>

3. 使用 overflow: hidden

这种方法是在父元素上添加 overflow: hidden，这样可以使父元素包含浮动元素，并且自动清除浮动。

.parent {
  overflow: hidden;
}

在页面中使用时，只需要给父元素添加 overflow: hidden 属性即可：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

总结

清除浮动是前端开发中不可忽视的一个问题，它涉及到页面的布局、排版和美观度等多个方面，建议在开发时使用 CSS Reset 消除浏览器的默认样式，并结合上述清除浮动的方法，在浮动布局时避免出现问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649af9b248841e98947e3992