CSS-文档流-浮动-定位-HTML（二）-阿南达文事网

CSS-文档流-浮动-定位-HTML（二）

为什么需要浮动！

正所谓存在即使合理，浮动的存在自然有它所需要的用处，举个简单的例子，在我们写DOC文档的时候，有是由需要这样一个排版：一个图片，然后关于图片的介绍围绕在这个图片周围

比如：

或者比如：

在DOC文档里面，我们可以自由移动图片的位置，让这些文字浮动在图片的周围，这就是浮动所能实现的效果，当然不仅于此。

用专业的知识来说：浮动让原本的标签脱离了文档流（关于文档流的说明在一中有详细说明），并且脱离之后不再收文档流规则的约束，拥有块元素和行内元素的性质（可以设定高度和宽度，并在可以占据同一行），但是没有脱离文本流（脱离文本流的效果就是图片会盖着文字，具体可以看三，结合定位说明）

我们也可以用浮动做展示一组的图片的样式：

简单的写了一下，大家可以把蓝蓝的块看成图片哈嘻嘻！下面是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{box-sizing:border-box;margin:0;padding:0;
}/*清除浮动*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;} 
.clearfloat{zoom:1} .parent{width:900px;height:800px;margin:auto;background:black;}
.first{width:200px;height:200px;background:blue;float:left;margin:50px;
}
</style>
</head>
<body><div class="parent"><div class="first"></div><div class="first"></div><div class="first"></div><div class="first"></div><div class="first"></div><div class="first"></div></div>
</body>
</html>

要是把浮动去了会怎么样呢？看一下效果：

上面就是我把浮动注释了之后的效果，因为div是块元素，独占一行，所以不会达到我们想要的效果，这就是浮动的妙用。
所以说浮动的出现肯定是因为有所需要，结合上面两个列子和读者可自行查阅

使用浮动带来的问题：打乱原来的文档流布局

1：高度塌陷

结合例子说明

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.first{width:200px;/*height:200px;*/background:red;
}
.second{width:200px;height:200px;background:black;
}.second1{width:100px;height:100px;background:yellow;/**float:left;*/
}
.second2{width:100px;height:100px;background:blue;/*float:right;*/
}.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;} 
.clearfloat{zoom:1} </style>
</head>
<body>
<div class="first"><div class="second1"></div><div class="second2"></div>
</div>
<div class="second">
</div>
</body>
</html>

这是一个正常的文档流，没有使用浮动，假定某种场景，我们需要第一个标签里面的两个子标签浮动起来：

注意观察并且结合代码设置的宽度和高度我们可以看出来，两个子标签的父标签消失了，两个子标签压住了下面一个标签一半。我们不由得看得出来，浮动的引用改变了周围标签原本的位置，打乱了原来的文档流，这是我们不愿意看到的！

为什么会造成高度塌陷？

注意看代码，第一个标签我并未没有设置高度，在未设置浮动之前，它的高度完全由他的子标签的高度撑起来，这也是块元素的性质，但是当我们把两个子标签设置浮动，就像我们之前所说，设置浮动会脱离文档流，而父标签没有脱离文档流，“管不住子标签了了”（抽象的说法），所以父标签的高度不会在被撑起来，就没有高度了，有人说我们把父标签也设置成浮动，这样不就能继续被子标签撑起来了吗。是的，给父标签设置浮动确实可以继续被称撑起来，但是，父标签的父标签呢，这样把问题想上级传递，最后我们要么把所有的级联标签全部设置成浮动，要么写崩！无论哪种情况都不是我们想要的，技术是为了方便，不是为了带来麻烦！
不过不用担心，有问题就有解决的办法，要不然，浮动也不会用到现在，没有被定位取代，相应的解决办法就是清除浮动下面我会说到！

其实做主要的也就是高度塌陷了，高度塌陷不仅仅说的是我举得例子那样，周围的布局都可能受到影响

处理高度塌陷—清除浮动

关于清除浮动的方法有很多，在这里我就和大家说一种最常用的，也是目前最为稳定的一种方法，其实大家搜搜可以查到许多方法，就像我之前看到的最多的一篇博客写了八种，不过总结来，大家最常用的还是我给大家推荐的这一种，而且这一种可以重复化利用，减少代码量，其他的大家也可以去了解一下

上代码：

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;} 
.clearfloat{zoom:1}

就是这两个样式,应用一下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.first{width:200px;/*height:200px;*/background:red;
}
.second{width:200px;height:200px;background:black;
}.second1{width:100px;height:100px;background:yellow;float:left;
}
.second2{width:100px;height:100px;background:blue;float:right;
}.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;} 
.clearfloat{zoom:1} </style>
</head>
<body>
<div class="first clearfloat"><div class="second1"></div><div class="second2"></div>
</div>
<div class="second">
</div>
</body>
</html>

在这里要注意一下样式的用法，是放在浮动元素夫标签里面

<div class="first clearfloat">

关于浮动就到此位置把，下篇文章会说说定位的问题！