background 和 img_css的img标簽和清除浮動

img的title和alt有什麼差別？

• title：滑鼠移動上去的提示

• alt: 圖檔加載失敗時，避免使用者體驗不好，給的提示，比如當圖檔不存在時，這樣顯示：

清除浮動的幾種方式，各自的優缺點？

浮動：脫離文檔流，父元素不計算它的高度，會導緻塌陷，影響後邊元素的布局。

.wrap {            border: 1px solid fuchsia;        }        .box {            width: 200px;            background: red;            float: left;        }
           

我是愛美的姑娘，關注我，每天為您分享和複習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲

如下圖，父元素本來有一個邊框的，但是由于子元素浮動了，它不會計算浮動元素的高度，就塌陷了。如果我們再繼續寫元素，布局就亂了，這時候就需要把這一塊隔離開。不影響外邊的元素，同時外邊的元素也不能影響它，這時候就可以清除浮動來解決：

清除浮動的幾種方式：

1. 使用BFC，BFC計算高度的高度時候，浮動元素也參與計算，激活BFC的方式：

• float的值不是none。
• position的值不是static或者relative。
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible

BFC的特點：

• 内部的box會在垂直方向，一個接一個地放置
• 同一個BFC的兩個相鄰box的margin會發生重疊(body也是一個BFC)
• 每個盒子(塊盒與行盒)的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
• BFC的區域不會與float box重疊。
• BFC是頁面上的一個獨立容器，容器裡面的子元素不會影響到外面的元素。反之亦然。
• 計算BFC的高度時，浮動元素也參與計算(可用來清除浮動)。

給父元素設定：

我是愛美的姑娘，關注我，每天為您分享和複習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲

缺點： IE6 中還需要觸發 hasLayout ，例如為父元素設定容器寬高或設定 zoom:1。

1. 使用空元素，在後面清除浮動

我是愛美的姑娘，關注我，每天為您分享和複習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲

如下圖：

缺點：會新增多餘的空标簽，後期維護麻煩

1. 使用CSS的:after僞元素

我是愛美的姑娘，關注我，每天為您分享和複習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲

如下圖：

缺點：用zoom:1觸發hasLayout.

我是愛美的姑娘，關注我，每天為您分享和複習前端開發的知識點以及常見的面試題、學習的同時還可以了解最新的娛樂八卦、幽默搞笑，學習更輕松喲