浮动模型
在最开始，我们首先写一个二级结构：
<div class=”wrapper”>
<div class=”content”>1</div>
<div class=”content”>2</div>
<div class=”content”>3</div>
</div>
1.
2. .wrapper {
3. width:400px;
4. height: 100px;
5. border: 1px solid red;
6. }
7. .content {
8. width: 100px;
9. height: 100px;
10. background-color: black;
11. color: white;
12. }
我们现在在浏览器上能看到的应该是这个样子的：
那么我们现在给content加上一个特殊的属性：float，看看现在的页面上呈现的布局是什么样子的？
1.
2. .content {
3. width: 100px;
4. height: 100px;
5. float: left;
6. background-color: black;
7. color: white;
8. }
是不是页面变成了这个样子的？
这就是我们这个float属性的效果哟~
那么我们下面来正式介绍一下float属性吧
float浮动属性
float属性可以让元素像站队列一样浮动起来，它会让本来占满整行的元素只按照内容和设置的大小来在父级里面进行站队排列，当这一行剩余的空间不足以再放下一个元素的时候，元素就会自动换行，到下一行去进行浮动排列。当容器不够大的时候，虽然内容会超出容器的范围，但是超出之后仍然是按照相同的队形来进行站队。
浮动起来的元素会像absolute的元素脱离文档流，但是不会脱离文字流，这是什么意思呢？
我们来举一个例子：
<div class=”top”></div>
<div class=”bottom”>我是文字，我能看到文字流哟~</div>
1. .top {
2. width: 100px;
3. height: 100px;
4. background-color: red;
5. float:left;
6. }
7. .bottom {
8. width: 200px;
9. height: 200px;
10. background-color: black;
11. color: white;
12. }
现在我们可以看到，在页面上呈现出来的效果是这个样子的：
• 脱离文档流的意思就是正常的元素看不到它了，这一点很类似absolute属性，不脱离文字流的意思则是display属性是inline或者inline-block的元素还是可以看到它的，文字本身是inline属性的。
接下来，我们讲.bottom这个div的display改成inline-block;之后再看一下效果。
1. .bottom {
2. width: 200px;
3. height: 200px;
4. background-color: black;
5. color: white;
6. display: inline-block;
7. }
我们发现下面的黑色的方块并没有移动到下一行，而是紧跟着红色浮动方块进行了排列，但是我们并没有给黑色方块也设置浮动效果啊？
这是因为，float属性会自动将这个元素的display给改成inline-block的，也就是说，不论你给display加上什么值，只要有float属性，那么这个元素就是inline-block属性的，这也就是为什么红色浮动方块没有独占一行的原因了。• float属性只有两个值：left和right，默认的状态是没有值none。
• float：right的效果就是从右边开始排列，刚好和left是相反的效果。
那么我们来总结一下，float属性到底是干嘛的呢？
1.对元素进行布局。
2.像absolute一样，让元素浮动起来，产生自己独有的浮动流。
浮动流有两个效果：
① 脱离标准的文档流，但不会脱离文字流 ，正常的元素看不到它，但是有文字属性inline或者文字本身可以看到它。
② 在内部会把改元素变换成inline-block属性的元素。
那么我们什么时候使用浮动属性呢？
• 开发中，一般是进行网状布局的时候使用float属性。当我们不知道容器里面会盛放多少个子元素，但是这些子元素又是按照一样的格式进行排列，我们设置浮动来进行流式布局。
• 浮动属性还可以让我们实现报纸那样文字包围在图片四周的效果：
想到一点小常识
• 首先要记住，行级元素里面不能放块级元素。
• a标签里面不能再放a标签了。
• p标签内部不能放div标签，一旦写这种结构了：
<p>
<div></div>
</p>
浏览器会自动将这种结构给转换成：
<p></p>
<div></div>
当然，p标签里面也不要放ul标签，也不要再放一个p标签哟~
如何清除浮动流呢
我们说了，既然元素浮动起来之后，正常的元素就看不到它了，那么包裹它的父级自然也看不到它了，我们想让父级根据里面浮动的子元素来自适应宽高，如果不清除浮动效果的话，就会变成这个样子：
父级只剩下一条线了！
因此清除浮动是我们必须要做的事情。
那么怎么来清除浮动呢？
1.一个野路子，我们在父级里面的内容区最后加一个p标签。
<div class=”wrapper”>
<div class=”content”>1</div>
<div class=”content”>2</div>
<div class=”content”>3</div>
<div class=”content”>4</div>
<p class=”clear”></p>
</div>
我们给这个p标签增加清除浮动的样式：
1. .clear {
2. clear: both;// clear属性专门用来清除浮动的，虽然有还有left和right值，但是我们只要清除浮动一般都写both值。
3. }
现在我们看一下页面效果，父级的wrapper已经正常包裹住了子元素。
但是实际上，并不是父级清除了浮动流，而是被p撑开了，p.clear标签能看到上面浮动的元素，wrapper能看到不浮动的p标签，因此就把p标签包裹进去了，仅此而已。
我们要知道，html是做结构规划的，这个p标签作为功能标签出现了，这种代码在html里面是不允许出现的，所以我们要尽可能避免这种情况，因此这种方法不适用。
2.添加伪元素 <— 我们使用这种方式
首先我们要介绍一下伪元素。
伪元素是一种不能单独存在的元素，它必须要依附于其他正式的元素标签上使用，单独写是没有任何意义的。伪元素最常用的一共有两个：after和before。
1. span::before{}
2.
3. span::after{}
• 虽然一个冒号浏览器也能识别，但是规范写法是两个冒号哟~
我们现在举一个例子来介绍一下这两个伪元素的用法：
<span>举个例子</span>
1. span {
2. background-color: yellow;
3. }
4. span::before {
5. content: ‘现在我们来’;
6. background-color: red;
7. }
8. span::after {
9. content:‘，这就是效果’;
10. background-color: black;
11. color: white;
12. }
当我们不想改变html结构，有想要增添一些东西的时候，伪元素after和before就非常的实用，看到这个例子大家也就明白了它们的用处了。
• 不过要注意的是，写伪元素，即使内容是空的，也要加上content这个属性: content:”;
• 既然是伪元素，那么自然也属于元素了，我们可以改变伪元素的display为block，从而可以改变宽高等块级元素才有的样式。
那么了解了伪元素之后，我们根据第一种方式，为父级元素添加一个after伪元素，让这个伪元素专门实现清除浮动的功能即可：
1. .wrapper::after {
2. content: ‘’;
3. clear:both;
4. display: block; // 能清除浮动的元素，必须是块级元素！！
5. }
我们通常使用的清除浮动的方法，就是这一种。
那么现在问题来了，ie6、ie7并没有伪元素这种东西，怎么办？
• 前面我们介绍了bfc，这里我们介绍ie6ie7独有的一个东西——hasLayout。只要触发了hasLayout就和触发bfc有差不多的作用，能够触发这个东西的属性有很多，其中最无害的属于zoom属性了。
1. .wrapper {
2. zoom:1//视口同比例放大还是缩小，1就是不变
3. }
当我们写上这个元素的时候，ie6ie7也就可以清除浮动了。
不过我们其他的浏览器并不需要zoom这个属性，这个属性只是为了ie6和ie7准备的，所以这个时候我们需要一点点css hack，我们在zoom前面加一个号， **zoom: 1; 这个符号只有ie6和ie7能够识别，其他的浏览器都不识别，这样就可以让只有ie6和ie7去读这一行属性，其他浏览器直接忽略。顺便一提属性前面加上’_**‘之后，就只有ie6可以识别了。_zoom: 1;
3.触发bfc的方式来清除浮动
有很多的属性都可以触发bfc：
① 给.wrapper添加overflow:hidden; 可以让父级包裹住浮动子元素。
② 给.wrapper添加display: inline-block; 可以让父级彻底包裹住浮动子元素。
③ 给.wrapper添加position:absolute; 可以让父级彻底包裹住浮动子元素。
这三种方式虽然都可以清除浮动，但是都会改变样式，不符合开发规范，因此我们也基本都不使用。
导航栏的小应用
浮动模型最常见的作用就是制作导航栏，代码其实也很简单：
<ul>
<li><a href=””>毛衣</a></li>
<li><a href=””>牛仔裤</a></li>
<li><a href=””>风衣</a></li>
<li><a href=””>卫衣</a></li>
<li><a href=””>毛裤</a></li>
</ul>
<style>
</style>
这样我们就大致实现了一个淘宝上面的导航的效果。
• 最后，我们学习了浮动模型之后，也可以用这种方式实现三栏布局哟~
<div class=”left”></div>
<div class=”right”></div>
<div class=”mid”></div>
1. .left {
2. float: left;
3. width: 100px;
4. height: 100px;
5. background-color: orange;
6. }
7. .right {
8. float: right;
9. width: 100px;
10. height: 100px;
11. background-color: red;
12. }
13. .mid {
14. height: 100px;
15. margin-left: 100px;
16. margin-right: 100px;
17. background-color: blue;
18. }
不过依然要记住把mid放在后面写！
这次的知识点就总结到这里哟~