清除CSS浮動小例子

在CSS中，浮動是一種常用的布局方式，但如果不正確使用，可能會導致布局混亂，下面是一個簡單的CSS浮動小例子，以及如何清除它。

CSS浮動小例子

假設(shè)我們有一個包含兩個元素的容器：

<div class="container">
  <div class="float-left">左側(cè)浮動元素</div>
  <div class="float-right">右側(cè)浮動元素</div>
</div>

我們給這兩個元素添加了浮動樣式：

.float-left {
  float: left;
  width: 50%;
  background-color: #f00;
}
.float-right {
  float: right;
  width: 50%;
  background-color: #0f0;
}

這樣，兩個元素就會分別浮動到容器的左側(cè)和右側(cè)，如果我們想要清除這個浮動效果，該怎么做呢？

清除浮動

有幾種方法可以清除CSS中的浮動效果：

1、使用clear屬性：

我們可以給容器添加一個新的元素，并使用clear屬性來清除浮動。

```html

<div class="container">

<div class="float-left">左側(cè)浮動元素</div>

<div class="float-right">右側(cè)浮動元素</div>

<div style="clear: both;"></div>

</div>

```

這個新的元素會清除之前的浮動效果。

2、使用偽元素：

我們可以使用偽元素來清除浮動：

```css

.container::after {

content: "";

display: table;

clear: both;

}

```

這個偽元素會生成一個透明的表格，并清除浮動效果。

3、使用BFC（塊級格式化上下文）：

通過創(chuàng)建一個新的塊級格式化上下文，我們可以清除浮動效果：

```css

.container {

overflow: hidden; /* 創(chuàng)建BFC */

}

```

這種方法不會增加額外的HTML元素，但可能會影響容器的其他樣式。

清除CSS中的浮動效果有多種方法，可以根據(jù)具體的需求和情況來選擇***適合的方法，希望這個小例子能幫助你更好地理解如何清除CSS中的浮動效果。