浮動(dòng)是一種不同于固定和穩(wěn)定定位的定位方式，它將元素排除在標(biāo)準(zhǔn)流之外，即元素將脫離標(biāo)準(zhǔn)流，不占據(jù)空間。

在網(wǎng)頁設(shè)計(jì)中，浮動(dòng)元素可能會(huì)引起以下問題：

1.父元素高度不夠：如果元素被浮動(dòng)，那么它將脫離標(biāo)準(zhǔn)流并占據(jù)額外的空間，導(dǎo)致父元素的高度變得更低。這可能會(huì)影響與浮動(dòng)元素同級(jí)的其他元素的排列和布局。

2.影響頁面布局：當(dāng)浮動(dòng)元素與其他元素交錯(cuò)時(shí)，可能會(huì)出現(xiàn)混亂的布局。為了解決這個(gè)問題，可以使用清除浮動(dòng)的方法來清除浮動(dòng)，使得元素可以按照正確的順序排列。

為什么需要清除浮動(dòng)

1、子元素浮動(dòng)后，不占位置，父元素的高度無法被撐開，影響與父元素同級(jí)的元素；
2、與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后；
3、若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)解
決方法

清除浮動(dòng)的方式

1. 使用clear：both；屬性來清除元素的浮動(dòng)：

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

可以在父元素后面添加一個(gè)空的clearfix標(biāo)簽，并設(shè)置clear：both；屬性來清除浮動(dòng)。這個(gè)標(biāo)簽必須是塊元素，并且它后面的所有內(nèi)容都應(yīng)該是清除浮動(dòng)的內(nèi)容。

2. 使用偽類選擇器 clear： 和 float：left；來清除浮動(dòng)：

.clearfix:after {  
  content: "";  
  display: table;  
  clear: both;  
}  
.clearfix {  
  float: left; /\* 或者float: right \*/  
}

在這個(gè)示例中，我們使用了偽類選擇器 clear：both；來清除浮動(dòng)，同時(shí)使用了 float：left；來將元素向左浮動(dòng)。這個(gè)方法可以根據(jù)需要自由地設(shè)置元素的浮動(dòng)方向。

3.添加如下樣式，給父元素添加 clearfix 樣式：

.clearfix:after {
	content: "."; display: block;
	height: 0; clear: both; visibility: hidden;
 }
/* for IE */
.clearfix{ *zoom:1; }

4.給父級(jí)元素設(shè)置 overflow：hidden；或 overflow：auto；本質(zhì)是構(gòu)建一個(gè) BFC