阅读量:4
清除浮动的两种写法是使用空元素和使用伪元素。
- 使用空元素: 在浮动元素的父元素的闭合标签前,插入一个空的
<div>
元素,并给它添加一个特定的类名,比如clearfix
。然后在 CSS 中为这个类名设置样式,包括清除浮动的属性。
HTML:
<div class="clearfix"> <!-- 浮动元素 --> </div>
CSS:
.clearfix::after { content: ""; display: table; clear: both; }
- 使用伪元素: 直接在浮动元素的父元素上使用伪元素
::after
,并为其添加样式,包括清除浮动的属性。
HTML:
<div class="parent-element"> <!-- 浮动元素 --> </div>
CSS:
.parent-element::after { content: ""; display: table; clear: both; }
这两种写法都能实现清除浮动的效果,选择哪一种取决于个人的喜好和项目的要求。