标签的浮动

有些时候我们需要将好多标签元素排列到一行或者某一区域中，这是我们需要将标签设置为浮动。
比如

这里我们可以看到，在这一个li标签里，我们放了三个标签元素，一个img标签，一个p标签，一个label标签。在页面效果中，我们看到三个标签元素是水平排列的。
还有左边最新快讯一栏与右侧那一栏，是属于两个大的div标签块的，我们也可以通过浮动的方式使他们水平排列。

在这里你可能会想，如果直接使用display：inline-block；行内块可以实现水平排列，为什么要使用浮动呢？原因是这样的，因为如果使用行内块的话，两个标签元素之间会默认加上一个小小的空格，下面是效果演示：

大家可以看到，两个标签元素之间有一个空格的空隙，被我选中出来了。而我们如果使用浮动的话，就可以彻底的解决这个问题。

首先，浮动是一种样式，所以代码要写在样式中。
其次，浮动的代码：float：left；或者float：right；分别表示左浮动和右浮动
然后，被设置浮动的标签，会脱离文本流。至于什么是脱离文本流，我们看一个演示

大家可以看到，标签02是写在标签01后面的，但是给标签02设置浮动之后，标签02脱离了文本流，使其排列在还在文本流中的标签01之前，而且大家可以到，标签02和标签01之间已经没有空格隔开了。

如果我们让标签01也脱离文本流，就会是这样的

大家可以看到由于标签01和标签02都脱离了文本流，所以它们的排列是没有问题的，而且他们之间的空格也被消除了，但是由于它们都脱离了文本流，导致div容器中没有标签撑起它的高，就相当于div标签里面没有标签元素，所以div标签便没有了高。
这是浮动样式所存在的问题，要解决这个问题，我们需要给我们设置浮动样式的标签的父容器设置清浮动的样式。
演示如下：

在这里我们可以看到，在父容器清浮动之后，子容器就能撑开父容器，使父容器拥有了高。
注：只要给标签使用了浮动，那么一定要给它的父容器清浮动。

至于清浮动的代码，这个只要记住就行了，可以不用去理解。

而上面介绍的清浮动的方法，可能在一些情况下，会出现bug，不知道为什么，也不知道哪儿缺什么，就是没办法清浮动，把父容器给撑开，所以这里我们介绍另外一种清浮动的方式，只不过不建议使用这种方式。
演示如下：

这种方式只需要在写浮动样式的标签最后，加上一行这个<div style="clear: both;"></div>就可以了。这种方法比较简单粗暴，十分的简洁而且效果也很强大，但是建议大家还是尽量少使用，因为这种方式不便于后期检查代码。