喽大家好，我是作者“未来”，本期分享的内容是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上