清除css浮动的三种方法小结

清除CSS浮动是在设计网页时不可避免的问题，因为浮动元素可能会破坏页面的布局，导致文字或其他元素跨越浮动元素。下面总结了清除CSS浮动的三种方法。

清除CSS浮动是在设计网页时不可避免的问题，因为浮动元素可能会破坏页面的布局，导致文字或其他元素跨越浮动元素。下面总结了清除CSS浮动的三种方法。

1. 使用clear属性

clear属性可以用来清除浮动。它被用于在跨两个浮动元素的时候避免其重叠，并且该属性只适用于块级元素。下面是一个清除浮动的示例：

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

在上面的代码中，clearfix是一个类名，它被赋予了after的伪元素属性，清除浮动的效果就可以生效。如果需要清除具体某个元素的浮动，只需将clearfix类添加到该元素中，例如以下示例：

<div class="clearfix">
  <img src="example.jpg" alt="example" />
  <p>例子文字</p>
</div>

2. 使用overflow属性

当使用overflow属性时，浮动元素会被包含在父元素中，并且不会导致其它元素的跨越。需要注意的是，该方法只对块级元素有效。以下是使用overflow清除浮动的示例：

.clearfix {
  overflow: hidden;
}

在上面的代码中，clearfix类拥有一个overflow属性，该属性设置为hidden，可以清除该元素内部浮动元素溢出的问题。例如以下示例：

<div class="clearfix">
  <img src="example.jpg" alt="example" />
  <p>例子文字</p>
</div>

3. 使用display属性

通过更改父元素的display属性，可以清除元素浮动。该方法包括了仅对块级元素和行内元素有效的两种方法。

• 改变父元素为flex

.container {
  display: flex;
  flex-wrap: wrap;
}

在上面的代码中，container类将其display属性设置为flex，使其成为了一个弹性容器，在此之上，我们再用flex-wrap: wrap来强制元素折行。这样，浮动的元素就会被包括在其中，并且不会再引起其余元素的跨越。

• 改变父元素为inline-block

.container {
  display: inline-block;
}

在上面的代码中，container类的display属性设置为inline-block，它会将该元素视为内联元素，但该元素可被应用宽度和高度等块级元素的属性。此方法可能会有一些限制，但仍然可以被用于某些情况下的浮动清除。

综上所述，以上三种方法都可以用来清除CSS浮动，开发者可以根据自己的需求和布局特点挑选适合的方法。