浅谈css中浮动和清除浮动带来的影响

时间 2019-11-18

标签浅谈 css 浮动清除带来影响栏目 CSS 繁體版

原文原文链接

有不少时候，咱们都会用到浮动，而咱们有时候对浮动只是只知其一;不知其二，却不是太清楚它究竟是怎么回事，不知道各位有没有和我同样的感受，只知道用它，殊不知道它究竟是怎么回事，因此，在学习的过程当中，就要把一个概念不是很清晰的问题把它弄清楚了，便于咱们之后的使用。早些时候，W3C规定出来的浮动实际并非为了布局所用，当时是为了作文字环绕才使用到浮动，后来有人发现用它来作布局也挺不错啊，可是，用到了浮动，是要付出必定的代价的，咱们就必需要处理浮动所带来的影响。接下来咱们就聊聊浮动的那些事儿，此分享仅供参考，有什么不足的地方但愿各位博友指正！

首先咱们要知道，css中的块级元素在页面中是独占一行的，自上而下排列，也就是咱们所说的流，一般咱们称之为标准流，在这里我以div为例，div是块级元素，以下图。

可很清楚的看获得，div是独自占用一行的，div2和div3是不会排在div1后面，这是在标准流中的理论，可是，有些时候，咱们的需求不只仅是这样，咱们想着如何在一行中显示多个div元素，因此，标准流已经不能知足咱们的需求，这个时候咱们就须要用到浮动，咱们这样理解，浮动就是让这个div元素脱离标准流，漂浮在标准流的上面。如今，我给div2加上一个向左的浮动，给个fload：left；而后来看看会发生什么，看图吧，上效果低千言万语！

如图能够看出，黄色的div不见了，其实它并非不见了，而是跑到了绿色盒子的下面，这个时候咱们就要想到了，由于咱们给了div2向左浮动，div2已经脱离了标准流，至关于它已经和黄色盒子、红色盒子不在一个层次上，因此，黄色盒子就会顶上去跑到绿色盒子的下面，占据着绿色盒子的位置，就是咱们如今看到的效果。好，理解了上面的，让咱们接着来，如今我给黄色盒子和绿色盒子都加上左浮动，再看看效果：

如今咱们看到div2和div3都脱离的标准流，此时，div3发现div2也是浮动的，因此div3就会跟随着div2以后，而div2发现上边的元素div1是标准流中的元素，所以div2的相对垂直位置不会改变，顶部仍然和div1元素的底部对齐，因为是左浮动，因此，左边的div2在最左边。

接下来咱们来看看不一样的：

若是我把div2和div3都设置成右浮动的话，看图以下：

如今咱们能够看到，div2和div3都漂浮到了最右边。可是有一点咱们能够发现，由于是向右浮动，右边是最前，因此div2会第一个向右浮动，div3随着紧跟div后面向右浮动，这个时候就很容易的理解了，因为div1是在标准流上，它是独自占用一行的，因此div2和div3不会跑到上面去。

为了方便理解，让咱们再看一个例子，如图：

如今我有四个div，如今他们分别没有浮动，都在标准流里，每一个div独占一行，如今我给div2和div4分别加一个左浮动，而后给div3增长50px的宽度，便于理解，来看看效果：

如今咱们能够很好的理解上面的效果了，div2和div4都是左浮动的，先来理解div2 ，div2因为有左浮动，脱离了标准流，它发现div1是标准流里的元素，所了垂直位置不变，而后，div3发现div2是浮动的，它和我不在一个流中了，因此它的位置就空了，因此div3就顶了上去，如今来理解div4，div4也是向左浮动的，首先它看到div3向上顶了上去，因此div4也就跟着顶上，然而它是浮动的，可是它发现div3是标准流中的元素，因此它的垂直位置也不会有变化，若是没有div3的话，它的位置会紧跟div2的后面向左浮动的。

好了，只要理解了上面的东西，大概的浮动问题基本均可以解决了，无论页面多复杂，咱们的初衷就是想让多个div或者是多个li标签在一行中显示，便于咱们的布局需求，然而，知足咱们的需求了，就会带来一些影响，就是浮动带来的影响，因此，咱们在用到它的时候就要去解决浮动所带来的影响，也就是传说中的清除浮动。

首先，让咱们来看看浮动会带来什么影响：

第一种：如今我有三个div，都属于标准流中，独占一行，如图所示：

然而，如今个人需求变了，我想让div1的右边是div2也就是让它们两个在同一行，然而div3的位置仍是在下面，这个时候咱们要是用到浮动了，给div1和div2添加一个向左浮动，就会出现问题，如图所示:

问题就是div3发现它前面的两个div都脱离了标准流了，那也就是说它上面没有东西了，那我是否是应该顶上去，然而，这并非咱们想要的效果对吧，因此，如今咱们就须要清除浮动了。清除浮动有三种种方法，在这里我先说第一种：

隔墙法，也就是在须要清除浮动的元素前面添加一个空的div，由于它没有浏览器默认样式，没有特殊功能，并且通常不会被css样式化，因此这种方法也是比较常见和经常使用的方法。

如今，也就是在div3前面添加一个空的div，给这个div添加一个css属性，clear：both；代码以下：

    .clearfix{
        clear: both;
    }
</style>
<body>
  <div class="box1">div1</div>
  <div class="box2">div2</div>
  <div class="clearfix"></div>
  <div class="box3">div3</div>
</body>

这样的话就起到了清除浮动的效果，也就是让div3待在浮动元素的下面。效果如图：

如今咱们来看看浮动给我带来的第二种影响：

如今看看个人HTML是怎么写的：

<style>
    .box{
        background-color: yellow;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

来，先看看如今的效果：

你们注意，如今我是没有给外面的div高度的宽度的，我只是给了它的背景颜色是黄色，这种状况很容易理解嘛，由于它的子元素把它撑开了嘛，那如今个人需求变了，我想让div1和div2在同一行排列，那么，如今我就给div1和div2添加一个向左浮动，来看看会有什么效果:

注意了，如今div1和div2都有了向左浮动，脱离了标准流，咱们发现，本来外面包裹的div不见了，不理解的人这时候就很纳闷了，可能你在用的时候不会注意到，也有可能当时需求不同，因此不能注意到这点，它是怎么回事呢，由于div1和div2都脱离了标准流，因此外面包裹的div没有支撑的东西，也就是所谓的高度塌陷，那么，咱们并不想让它呈现出这种效果，因此这个时候就要清楚浮动了，这里我就说第二种清楚浮动的方法，overflow方法，在父元素上设置overflow这个属性，若是父元素的这个属性设置为auto或者是hidden，父元素就会扩展包含浮动，这个方法有着比较好的语义性，由于它不须要额外的元素，可是，要记住一点，overflow属性不是为了清除浮动而定义的，要当心不要覆盖住内容或者触发了不须要的滚动条。

如今我就给外面的div添加overflow：hidden，或者是auto，

代码以下：

<style>
    .box{
        background-color: yellow;
         overflow:atuo;     //或者是hidden
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

看看效果吧：css

如今外面的div是否是又出来了。

不一样的状况就须要不一样的浮动清除办法，如今来讲说第三种清除浮动的方法:

就是利用伪类元素来清除有浮动的标签，也就定义一个公共的类clearfix，给这个类添加css属性，在里面进行清除浮动的操做，光说没用，直接看代码吧：

.clearfix:after{
    content:"";
    display:table;
    height:0;
    visibility:both;
    clear:both;
}

.clearfix{
*zoom:1;    /* IE/7/6*/
}

这里把它写成公共的样式，只要哪里须要清除浮动，就在哪里添加一个清除浮动的类，好比上面的例子，我就给外面包着的div添加clearfix这个类，能够达到和上面一样的效果。这种方式这样理解，就是利用伪类元素，也就是在有浮动的标签前面添加一个块级元素，来达到效果。

代码以下：

<style>
       .clearfix:after{
    content:"";
    display:table;
    height:0;
    visibility:both;
    clear:both;
}

.clearfix{
*zoom:1;    /* IE/7/6*/
}

</style> 

<body>
<div class="box clearfix">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

以上就是我分享的css中的浮动和清除浮动所带来的影响，若有不足的地方，还请各位博友斧正！谢谢你们！