嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

?

第二階段 CSS3

12 清除浮動

1 清除浮動的本質

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0的問題。

清除浮動的方法

其實本質叫做閉合浮動更好一些，記住，清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出囗和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

選擇器{ clear：屬性值；}

實際工作中只用到both，一個詞搞定。

2 額外標簽法

w3c推薦的做法是通過在浮動元素末尾添加一個空的標簽(盒子)例如 ＜ div style=" clear:both"＞＜/div＞，或 其他標簽br等亦可。

優點：通俗易懂，書寫方便

缺點：添加許多無意義的標簽，結構化較差。我只能說，w3c推薦的方法我不接受，你不值得擁有。。。

3 父級添加 overflow方法

可以通過觸發BFC的方式，可以實現清除浮動效果。（BFC后面講解）

可以給父級添加：overf1ow為 hidden/ auto/ scroll都可以實現。

常用的就是heidden

4 after偽元素清除浮動

after方式為空元素的升級版，好處是不用單獨加標簽了

使用方法：

優點：符合閉合浮動思想 結構語義化正確

缺點：由于E6、7不支持: after，使用zoom:1觸發 hasLayout。

代表網站：百度、淘寶網、網易等

5 雙偽元素清除浮動（before和 after）

使用方法：

優點：代碼更簡潔。

缺點：由于IE6-7不支持：after，使用zoom:1觸發 hasLayou

代表網站：小米、騰訊等

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結束，下篇文章將分享《13 photoshop基本操作》小伙伴們不要錯過喲！

絡編程之Span標簽。

同學們好，今天我將為大家分享Span標簽的相關知識。Span標簽是一種無意義的行內元素，沒有任何實際效果。如果不加CSS，它和不加文字沒有任何區別。但是，它非常重要，因為它可以方便地對元素進行分組，以不同的樣式顯示。

先來看看今天的示例效果。在這個網頁上，我使用了CSS和JS分別演示了Span標簽的效果。現在，一共有兩行文字，第一行中的無語義和元素加上了Span標簽，可以看到它們有藍色并且加粗。但除此之外，這句話和普通文字沒有任何區別。

第二行中，我使用JS代碼實現了對Span標簽動態數字的變化。點擊0時，每隔100毫秒，0的數字開始自動加1。再次點擊時，數字暫停增加。如果繼續點擊，數字又開始增加。現在，讓我們來看一下實現代碼。Span標簽和div標簽一樣，也是一種無屬性的包圍標簽。它的常用屬性包括ID、style、class，用法和寫法與div相同。但是，Span標簽更多地用于對文字的操作。

雖然您可以像使用div一樣使用CSS來設置CSS，但總感覺怪怪的。實際上，這應該被稱為XHTML和CSS布局。Span標簽沒有固定的格式，只有當它應用CSS時才會產生視覺上的變化。如果不對Span應用CSS，那么Span標簽中的文本與其他文本沒有任何視覺上的差異。它主要是提供了將部分文字獨立出來的方式，可以替代以前的Font標簽。Span標簽的實用性主要體現在CSS和JS上，它的用法很簡單，一眼就能看懂。還有時間，簡單介紹一下控制JS的代碼。ID是命名onclick是鼠標點擊事件。當點擊這個Span時，將調用setclock函數。通過b變量控制是暫停還是開始增加數字。如果b為假，將開始調用SpanC函數。如果b為真，將清除計時器并暫停。

今天的分享就到這里。請記住Span標簽的用法和寫法。所有的案例和相關文檔都可以向我索取。我們下期再見。如果您想學習網絡編程、服務端編程、數據庫或算法，請關注我們。

、CSS方法

.disabled { pointer-events: none; }

二、jQuery方法

方法一

$(this).click(function (event) {
    event.preventDefault();
}

方法二

$('a').live('click', function(event) {
    alert("抱歉,已停用！");
    event.preventDefault();
});

注：此方法中的live亦可以為on, bind等方法

方法三

$('.disableCss').removeAttr('onclick'); //去掉標簽中的onclick事件

通過removeAttr方法來控制html標簽的屬性已達到啟用或禁用事件。另, 使用這種方式也可以控制其他事件或其他效果。

方法四

$('#button').attr('disabled',"true");//添加disabled屬性
$('#button').removeAttr("disabled"); //移除disabled屬性

注：和方法三是一樣的, 不過disabled屬性一般用在類型為button或submit的input上