[分享]css取消周围浮动的标签

在使用 CSS 进行布局时，我们经常会使用浮动（float）来实现排版。但是有时候会出现一些问题，比如一个元素设置了浮动后，周围的元素布局也出现了一些问题。这时候，我们需要撤销周围元素的浮动，让布局恢...

在使用 CSS 进行布局时，我们经常会使用浮动（float）来实现排版。但是有时候会出现一些问题，比如一个元素设置了浮动后，周围的元素布局也出现了一些问题。这时候，我们需要撤销周围元素的浮动，让布局恢复正常。下面，我们就来看一下如何使用 CSS 取消周围浮动的标签。

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

代码中的 .clearfix 是一个类名，可以根据需要取任意名称。我们在需要取消浮动的元素的父级元素上添加这个类名，就可以实现取消浮动的效果了。

这个代码的原理是利用伪元素 ::after 来在元素内部添加一个空的块级元素，然后使用 clear 属性来清除浮动。这样，元素的后面就会插入一个空元素来清除浮动，达到取消浮动的目的。

需要注意的是，在使用这个代码时，我们需要将浮动元素的父级元素设置为块级元素，否则清除 float 的代码可能会产生不正确的效果。

总的来说，这个方法是一种比较简单、易于理解的方法，适用于大多数情况下。但是在特殊情况下，比如网格布局等，可能需要使用更高级的技术来取消浮动。