第九篇 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{
     300px;
}

在div1的样式里再加一个宽度，就可以了，它一样能占据更多的宽度，比如设置成"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等