clear-fix清除浮动的两种写法

clear-fix

878

2024/1/3 16:25:49

栏目: 编程语言

清除浮动的两种写法是使用空元素和使用伪元素。

使用空元素：在浮动元素的父元素的闭合标签前，插入一个空的 <div> 元素，并给它添加一个特定的类名，比如 clearfix。然后在 CSS 中为这个类名设置样式，包括清除浮动的属性。

HTML:

<div class="clearfix">
  <!-- 浮动元素 -->
</div>

CSS:

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

HTML:

<div class="parent-element">
  <!-- 浮动元素 -->
</div>

CSS:

.parent-element::after {
  content: "";
  display: table;
  clear: both;
}

这两种写法都能实现清除浮动的效果，选择哪一种取决于个人的喜好和项目的要求。

最新知识库