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

avatar
作者
猴君
阅读量:4

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

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

HTML:

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

CSS:

.clearfix::after {   content: "";   display: table;   clear: both; } 
  1. 使用伪元素: 直接在浮动元素的父元素上使用伪元素 ::after,并为其添加样式,包括清除浮动的属性。

HTML:

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

CSS:

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

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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!