CSS中float屬性是用來(lái)控制元素浮動(dòng)的，常用于網(wǎng)格布局或?qū)崿F(xiàn)圖文混排等效果。但是，float屬性也會(huì)帶來(lái)一些bug，本文就來(lái)介紹一些常見(jiàn)的float bug，并給出解決方法。

1. 父元素高度塌陷：

父元素 {
border: 1px solid #ccc;
}
子元素 {
float: left;
}

在這個(gè)例子中，子元素為浮動(dòng)元素，父元素為普通塊級(jí)元素。當(dāng)父元素的高度沒(méi)有被指定或使用auto時(shí)，會(huì)發(fā)現(xiàn)父元素的高度塌陷，即父元素高度為0，導(dǎo)致子元素溢出父元素。

解決方法：

.clearfix::after {
content: "";
display: table;
clear: both;
}
父元素 {
border: 1px solid #ccc;
position: relative;
}
子元素 {
float: left;
}
子元素:last-child {
margin-right: 0;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}

2. 文字環(huán)繞：

圖片 {
float: left;
}
文字 {
margin-left: 20px;
}

在這個(gè)例子中，圖片為浮動(dòng)元素，而文字為普通塊級(jí)元素。當(dāng)文字的margin-left值小于圖片的寬度時(shí)，文字會(huì)環(huán)繞在圖片周圍，但是當(dāng)margin-left值大于圖片寬度時(shí)，文字會(huì)跨越圖片下方。

解決方法：

圖片 {
float: left;
margin-right: 20px;
}
文字 {
overflow: hidden;（或者使用word-break: break-all;）
}

3. 父元素與子元素寬度錯(cuò)亂：

父元素 {
padding: 10px;
}
子元素 {
float: left;
width: 50%;
}

在這個(gè)例子中，父元素為普通塊級(jí)元素，設(shè)置了padding值，而子元素為浮動(dòng)元素，使用了百分比寬度。此時(shí)會(huì)發(fā)現(xiàn)子元素寬度為父元素寬度減去padding值的50%，而不是父元素的50%。

解決方法：

父元素 {
padding: 10px;
box-sizing: border-box;
}
子元素 {
float: left;
width: calc(50% - 20px);（或者使用flex布局）
}

通過(guò)上述幾個(gè)例子，我們可以看出，float浮動(dòng)使用不當(dāng)會(huì)引發(fā)一些bug，甚至?xí)绊懻麄€(gè)頁(yè)面布局。因此，在使用float屬性時(shí)，一定要小心謹(jǐn)慎，同時(shí)也要熟練掌握解決方法。