第九篇 float浮动
Posted 幸享龙枫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第九篇 float浮动相关的知识，希望对你有一定的参考价值。
float浮动
首先老师要声明，浮动这一块，和边距、定位相比，它是比较难的，但是用它，页面排版会更好。
这节课就直接上代码，看着代码去学浮动。
我们先弄一个div，给它一个背景颜色：
html：
<div id="div1">我是浮动div</div>
CSS：
#div1{
background-color: aquamarine;
}
这里同学们能看到，div1，它占据整行，有一个背景色。那么我们先来看看给它设置一个float(浮动)属性：
CSS：
#div1{
background-color: aquamarine;
float: left;
}
这样我们就让div1成为了浮动，再刷新页面，会发现，div1的宽度不在是占据整行了，而是变成内容有多大，它就有多大。那么，还能设置它的宽度不呢？答案是能，我们用width来设置：
CSS：
#div1{
width: 300px;
}
在div1的样式里再加一个宽度，就可以了，它一样能占据更多的宽度，比如设置成"width:100%"，这句话的意思是，宽度为百分之百！就是说，它的父级有多宽，它就会有多宽，这里我们没给div设置什么父亲元素，它是写在body下面的，所以body(整个浏览器)有多宽，它就有多宽。
它有什么特点呢？我们再在div1下面加一个div2测试一下，div2我们不给任何样式：
HTML：
<div>我是div2，没有任何样式</div>
然后去刷新页面，会发现，div2它没有跨行，而是在div1后面去了。这就是float最大的特性，它不像“绝对定位”一样脱离文本，float它依旧存在文本里的，不过它默认情况下，宽度是只有内容的宽度，所以会改变块级元素的宽度(占据整行)。跟“相对定位”也有区别，相对定位会保留原本元素存在的位置，而它不会，我们可以使用外边距margin来位移它的位置：
CSS：
#div1{
margin:80px 0 0 100px;
}
再次在div1里面加样式，能看到，div1发生了位移，那我们试一下，像“定位”一样，用top或者left会不会有效果呢：
CSS：
#div1{
left:100px;
top:80px;
}
将margin改成以上代码测试一下。同学们会发现，没作用！那么区别出来了，float要让它产生位置变化，需要用到的是边距，不能像定位一样，直接使用left和top。那么我们将代码改回去，改成margin继续。
我们能看到，div1使用了float移动位置过后，随后的div2也跟着它后面像右侧移动，“相对定位”的话，只会保留原本位置，自身移动不会影响其他元素，这里的float对则对其他元素产生了影响。还能看出，他的高宽，也只有我们设置过的大小，左侧和上方跟div1本身是没有直接关系的。我们可以再加一个高来看出更明显的效果：
CSS：
#div1{
height: 200px;
}
依旧是在div1里加样式，我们能看到div1的高宽，很明显了吧！左侧和上方空出来的部分，则是它使用外边距移动过后留下的空白，那么它究竟会不会影响其他元素呢，会！
我们给div2加一个ID为‘div2‘然后再加样式：
HTML：
<div id="div2">我是div2，没有任何样式</div>
CSS：
#div2{
margin:0 0 0 100px;
}
这样的话，div2它原本应该是会距离左侧100px对吧，但是它却不移动，是因为什么呢？那我们再给div2加一个背景色看看它究竟怎么回事：
CSS：
#div2{
background-color: red;
}
给div2再加一个背景色，会看到，咦！它是占据整行的，关键是什么，它确实离左侧100px了，但是它基于的是浏览器左侧，而不是div1，是因为div1是浮动，它虽然还在文本里，但是它也跨了一个领域(就这样解释吧....多看看手册里怎么解释的哈，同学们)，它即影响其他元素，也又不影响，为什么呢？同学们能看到，div2的内容是基于div1的，而宽却是基于浏览器的。如果这样做，就会很难控制了，为什么呢，如果我们要div2距离div1有50px的距离，还要先清楚div1的宽和距离浏览器的距离，这样的话，会让人很难做的，很烦！那我们怎么做呢？让div2也成为float咯，先试试效果：
CSS：
#div2{
float: left;
}
给div2加一个浮动，然后在页面上刷新能看到，它是基于div1的了，距离它100px了，而且宽度什么的都被float改变了。很多同学不会很会运用它，是因为做的少，多尝试，就能理解，老师就是这样过来的。
有同学问，float这样哪有什么好的？还比边距和定位难。那么我们将float的值left换成right试试，加一个div3：
HTML：
<div id="div3">我是第三个div，我是浮动right</div>
CSS：
#div3{
float: right;
}
能够看到，div3就跑到浏览器的右侧去了，是因为它的值为"right"，跑到右侧去，这样的话，我们拖动浏览器，它就会适应浏览器的宽度，永远基于浏览器的右侧，这样的话，我们设置它发生位移，甚至是之后的“网页自适应”也更好控制了。举个例子：老师的浏览器宽度为1920px，我要让某个div模块在我页面的最右侧，难道我就用left然后这是它位移1920px吗？那如果还要距离右侧一点距离，老师还得一个px一个px或者大概的去估测，那不是很傻吗。而用了right让它基于右侧，就跟左侧一样，我们来这样玩一下：
CSS：
#div3{
margin:0 50px 0 0;
background-color: bisque;
}
老师总是给背景色，也是为了让各位同学看得更加清楚。上面的代码margin:0 50px 0 0;同学们明白吗？之前的课程里讲过，4个值的顺序是：top、right、bottom、left。那么就是说，距离右侧50px对吧。嗯....老师测试了一下，效果很明显！
float一般会用在哪里呢？我们不是经常逛商城吗，淘宝、京东等，我们写一个网页，首先当然是分析了，那么一个首页怎么写？大概是这样的：顶部、左侧导航栏、右侧内容。那么我们就可以给顶部设置一个float设置成宽度100%，左侧float比如宽度是20%，那么右侧内容的宽度则是80%。这样的话， 三个作为父级元素，里面的子孙后代也只好遵循他们的宽度。
老师给大家一个代码，可以模拟一下效果看看：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>静态布局</title> <style> div{ border: 1px solid red; margin: 2px; } .maindiv{ width: 1440px; margin: 0 auto; overflow: hidden; } .topcontent{ height: 80px; background-color: lightcyan; } .bottomcontent{ height: 120px; background-color: lightgoldenrodyellow; } .middlecontent{ overflow: hidden; } .middlecontent .midleft{ float: left; min-height: 500px; width: 160px; background-color: aqua; } .middlecontent .midright{ width: 1260px; height: 800px; display: inline-block; background-color: lightcoral; } </style> </head> <body> <div class="maindiv"> <div class="topcontent"></div> <div class="middlecontent"> <div class="midleft"></div> <div class="midright"></div> </div> <div class="bottomcontent"></div> </div> </body> </html>
老师从最外层开始解释：
先用一个div设置到最外层，做最高级的父亲，里面的内容都是它的子孙后代，给它设置一个固定宽度1440px，其后代就不会超过它的宽度，方便控制。margin:0 auto 的意思是，它距离页面的边距设置成0，默认情况下是有几个px的，所以我们的内容总不是靠近浏览器，同学可以测试一下效果，auto是居中的意思，控制的是块级元素居中哦。
CSS里给每一个div设置了一个border边框效果，margin的上下左右都有2px，给他们来一点小距离，区分。
然后我们说里面的第一个div 它的class="topcontent"，即是顶部内容。因为div占据整行，它的父亲1440px它也就有那么大，给了一个宽度和背景色，好看效果。
最后一个div class="bottomcontent" 就是底部内容，它的样式和顶部是一样的，就是给个高度和背景色。
看中间的div class="middlecontent"，它里面就设置了一个overflow:hidden，意思是什么呢，比如它的高为100px，而你的内容太多，需要使用到120px，那么超出的20px的内容将不会展现出来，换句话说，就是隐藏掉了，但它依旧存在这个div里面的。它里面包含了左侧和右侧，左侧就比如是导航栏，右侧就是内容：
老师CSS里面写的，也是一种选择器的写法，就是找到父元素：middlecontent 给出一个空格，然后找到下一个儿子，midleft，这里面的样式的意思是：左浮动、min-hight是最小高度、宽度、背景色；midright：宽度、高度、display:inline-block意思是行内块元素、背景色
如果right里面没有display:inline-block，就会因为left里的浮动所影响。
如果老师讲的不够清楚，欢迎各位同学给出意见。
注：浮动是真的好难讲。要是面对面演讲，那就好多了。
附加：span类行级元素加了float，会变成div类的块级元素一般，能设置top和bottom等
以上是关于第九篇 float浮动的主要内容，如果未能解决你的问题，请参考以下文章