CSS浮动看我就够了

取了个牛B哄哄的名字，成功的把你骗进来了(偷笑...)。

float是css样式中的定位属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。设置元素浮动可以让多个块状元素并排显示。

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注意：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

废话不多说，咱先拿W3school中的例子看看
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

图1

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

图2

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

图3

当你看到这里，其实你就已经掌握了如何使用浮动了。但是呢，如果仅仅只有这些，那就根本就没有写这篇文章的必要了，所以，咱们先回到当初设计浮动的初衷上。当初设计浮动不是为了高大上的布局，仅仅只是为了实现文本围绕效果,就像下图这样：

图4

咱直接上代码，实现类似上面网页的效果：

.wrapper {
    max-width: 1080px;
    margin: 0 auto;
    margin-top: 10px;   
    padding: 10px 20px 0;
}
.wrapper:nth-child(n) > div {
    float: left;
}   
.wrapper:nth-child(2n) > div{   
    float: right;
}
.wrapper:nth-child(2n) h2 {
    text-align: right;
}
.img_box {
    width: 20%;
}
.img_box img {
    width: 90%;
    height: 90%;
}


<div class="wrapper"> <!-- 使劲儿复制粘贴这一块代码 -->
    <h2>Title</h2>
    <div class="img_box">![](http:https://img.haomeiwen.com/i1351863/d6c3a229833ebaac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div>
    <p>Lorem ipsum dolor sit amet, consec adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. </p>
</div>

最后是酱紫的：

调戏女神

在我的实现中，我对warpper中的<div>进行了浮动，奇数的向左浮动，偶数的向右浮动。当我们p标签中的内容比较多时，就能出现图中的文字环绕效果。但是当图片比较大，文字比较少会出现什么问题呢？看图：

再调戏女神

出现上图中的情况，其实是浮动的特性使然，浮动具有破坏性，对元素使用浮动会使元素脱离文档流，所以包围图片的 div 不占据空间，造成了父元素的坍塌，此时的父div只有p标签的内容高度了。要想让包围元素在视觉上包围浮动元素，就必须使用clear清除浮动了。

这里我定义了一个叫做clearfix的类选择器，然后在外围的<div>中使用就可以了。

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

<div class="wrapper clearfix">
    <h2>Title</h2>
    <div class="img_box">![](http:https://img.haomeiwen.com/i1351863/d6c3a229833ebaac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div>
    <p>... </p>
</div>
    

当然清除浮动的方式有很多，比如我们可以在外围<div>的最后添加一个空的<div>。

.clear {clear: both;}

<div class="wrapper">
    <h2>Title</h2>
    <div class="img_box">![](http:https://img.haomeiwen.com/i1351863/d6c3a229833ebaac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div>
    <p>... </p>
    <div class="clear"></div>
</div>

这样也可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。不过我们还有另一种办法，那就是对我们的外围容器div进行浮动：

.wrapper {
    ...
    float: left;
}

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。就像下面这样：

.wrapper {
    ...
    float: left;
}
footer {
    height: 80px;
    background-color: red;
    clear: both;
}
    
<div class="wrapper">
    <h2>Title</h2>
    <div class="img_box">![](http:https://img.haomeiwen.com/i1351863/d6c3a229833ebaac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div>
    <p>... </p>
    <div class="clear"></div>
</div>
<div class="wrapper">...</div>
<div class="wrapper">...</div>
<footer>...</footer>

当然clear属性的值不仅仅只有both，还有一些其他的值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

写到这里，关于CSS浮动的知识差不多讲完了，如果本文对你学习CSS能起到一点点作用的话，那么我的目的也就达到了:)，由于本人学习前端不久，对CSS了解还不是很深入，如果本文有什么错误或遗漏的地方，欢迎大家批评指点。