这个图片库小例子的效果如图所示，点击网页上某个图片链接时你将看到两种效果：占位符图片呗替换成这个链接所指向的图片，同时描述性文字也被替换为这个链接的title属性值。
利用一个简单的图片库应用案例，介绍DOM的几个属性。
首先为图片创建一个链接清单，我们使用无序清单元素<ul>,图片集保存在images里。通过增加一个占位符图片在主页上为图片预留一个浏览区域<img id="placeholder" src="img/timg.jpg" alt="my image gallery"/>。
然后，我们要求点击某个链接的时候留在这个网页，同时看到点击的那张图片和原有的图片清单。
- getAttribute：它是一个函数，用来获取元素的属性，getAttribute方法不属于document对象，所以不能通过document对象调用，只能通过元素节点对象调用。object.getAttribute(attribute)，它的参数只有一个，就是你打算查询的属性的名字。
- setAttribute：它允许我们修改属性节点的值，与getAtrribute一样，setAtrribute也只能用于元素节点。object.setAtrribute(attribute,value)
利用上面两种方法我们写一个函数，函数的名字叫showPic，参数叫whichPic。函数的作用有两个：
一、通过改变占位符图片的src属性将其替换为参数图片。
二、把图片下方的文本同时替换为那个图片连接的title属性值。
所以实现第一步后函数为：
function showPic(whichPic){
var source=whichPic.getAttribute('href');
var placeholder=document.getElementById('placeholder');
placeholder.setAttribute('src',source);
}
接下来我们扩展这个函数，要想把图片下方的文本替换为title属性值，并让它和相应的图片一起显示在网页上。
首先获取whichPic对象的title属性值，并把它存到text变量并获取元素节点<p></p>：
var text=whichPic.getAttribute（'title'）;
var description=document.getElementById('description');
接下来实现本文的切换，如果想得到或改变一个本文节点的值，那就使用DOM提供的nodeValue属性：<p>是一个元素节点，它本身的nodeValue是空值，而我们需要的是<p>的第一个子节点，也就是它包含的文本节点。description.childNodes[0].nodeValue,也可以写成description.firstChild.nodeValue。
然后我们用text变量去刷新id值等于description的<p>元素的第一个子节点的nodeValue属性值：
descriptipn.firstChild.nodeValue=text;
扩展后的函数为：
function showPic(whichPic){
var source=whichPic.getAttribute("href");
var text=whichPic.getAttribute('title');
var descriptipn=document.getElementById('description');
var placeholder=document.getElementById('placeholder');
placeholder.setAttribute('src',source);
descriptipn.firstChild.nodeValue=text;
}
接下来给图片列表的链接添加行为，也就是事件处理函数（在特定事件发生时调用特定的JavaScript代码），我们这里用onclick点击事件。
当我们把onclick事件处理函数嵌入到一个链接中时，需要把这个链接本身用作showPic函数的参数，这个时候就用this，表示这个<a>元素节点。
现在有一个问题，我们点击链接时，不仅showPic函数被调用，链接点击的默认行为也会被调用，也就是页面还会跳转到图片查看窗口，所以我们要阻止默认行为。
事件处理函数的工作机制中，在给某元素添加事件处理函数后，一旦事件发生，相应JavaScript代码就会执行，所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后，如果相应JavaScript代码返回true，onclick事件处理函数就会认为这个链接被点击了，同样的若返回false即会认为链接未被点击。所以在onclick所触发的代码中加上return false；就可以防止被带到图片查看窗口。
附：childNodes属性
childNodes属性用来获取任何一个元素的所有子元素。element.childNodes
它返回的是一个数组，所以用数组的length属性就能知道它包含的元素的个数。childNodes属性返回的数组包括所有类型的节点，而不仅仅是元素节点。空格，换行符都会被解释为节点。
每个节点都有nodeType属性：node.nodeType
元素节点的nodeType属性是1.
属性节点的nodeType属性是2.
文本节点的nodeType属性是3.
浮动（float）与清除浮动（clear）
上一篇中我们了解了块级元素与内联元素，今天将自己查阅的资料整理写出来，与大家一起理解什么是浮动，以及怎样清除浮动，本文以div元素为例。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以浮动也有left、right、none三种。浮动元素是脱离文档流的，漂浮在文档流之上，和文档流不是一个层次。
HTML 文件就像是一个方形的水槽，它在浏览器中加载的过程就好比是向水槽中放水，而这些水就代表的是页面中的各个元素，他们都是有顺序的进入水槽（文档流的顺序 和我们写字一样，从上到下从左到右）。当出现了一个具有浮动属性（float）的元素时，就好像是水流中多了一块泡沫，它会浮在水面上（也就是说明元素脱 离了文档流）。在水流停止后（页面加载完毕），这个元素会停靠在水槽的边缘或者停靠在别的泡沫边缘（浮动元素会处于包含框的边缘或者另一个浮动元素的边 缘）。（引用自老贝v5）
看上图，4个div都各占一行（即使div的宽度不宽，后面足以容纳下一个div，但还是各占一行），形成文档流，现在我们给div2加上float：left（左浮动），变成下图所示：我们发现div3的一部分被div2遮住了，div3和div4都上移了一部分，紧跟在div1后面，组成了新的文档流，而div2相当于漂浮在文档流之上，又因为是左浮动，所以靠左排列。
如果给div2加上右浮动，更能清楚的看到div3与div4自动上移，占据了div2的位置。如下图：
如果把div2,3,4都左浮动之后会是怎样呢？我们做了下图的试验，可以看到，div3和div4都紧跟在div2之后，如果一行排列不了，那么那个元素会掉到下一行（如下图2）。由此可以得出结论：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。（摘自经验分享：CSS浮动(float,clear)通俗讲解）
到这里，大家应该基本了解了浮动的原理，那么接下来我们看看浮动会导致什么？
浮动会导致父元素高度坍塌。因为浮动使元素脱离了文档流，并不占据文档流的位置，父元素也就不能被撑开，所以高度塌陷了。这给用浮动页面布局带来了麻烦，解决方法就是清除浮动。
清除浮动
清除浮动的关键字是clear，官方定义如下：
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
如图div1与div2都左浮动，div2紧跟在div1后面，如果想让div2在div1下面，就要清除浮动；因为清除浮动只作用与你想让移动的元素，所以对div1设置css样式clear：right是没有任何作用的，因为想让div2掉下去，就得对div2设置clear:left;就会如图让div2移到下方。
再举一个例子：div1与div2左浮动，导致外层container高度塌陷，给页面增加一个页脚（footer），按照上面的说法，要想让页脚回到下面，只需给footer{clear:left;}，但是container的边框仍然是一条线，怎么办呢?
1.增加一个清除浮动的子元素
2.我们可以给父元素添加以下属性来触发BFC：
✦ float 为 left | right
✦ overflow 为 hidden | auto | scorll
✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 为 absolute | fixed
所以我们可以给父元素设置 overflow:hidden/auto（如果你还要兼顾IE6的话，加上*zoom:1;来触发hasLayout）效果和上图相同，也可以给父元素也设置浮动，但页脚会上移，还得给页脚设置clear：left；不推荐用。也可以给父元素设置display:table。效果相同，页脚也不需要设clear:left；但页面布局可能被改变，不推荐用。
3.用:after伪元素，思路是用:after元素在div后面插入一个隐藏文本”.”，隐藏文本用clear来实现闭合浮动。推荐用。
.clearfix:before,.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
} // 全浏览器通用的clearfix方案，引入了zoom以支持IE6/7， 同时加入:before以解决现代浏览器上边距折叠的问题。
以上就是整理的浮动与清除浮动的基本知识啦~