清除浮动方法解析

Posted 2020-08-20 LD_Joy

清除浮动方法解析

 

清除浮动带来的额外影响

如果对于浮动不熟悉的同学，可以看看介绍float的文章。传送门：CSS float

我们知道，在一个父元素内如果遇到某个浮动元素，此时父元素的高度会发生塌陷。针对父元素高度塌陷的问题，现在已经有了很多的解决方案。针对每一个方案，我们来进行深度的剖析。

添加空块级元素

这种方法比较容易，但是要注意的是这个空元素必须是一个块级元素，不能是行内元素或者是行内块元素。缺点就是多了一些没有意义的标签。代码如下。

//html
<div class="content">
    <div class="float">
        
    </div>
    <div class="clearfix"></div>
    //用于清除浮动的元素必须是块级元素
</div>

//CSS
.content {
    background:pink;
}
.clearfix {
    clear: both;
}
.float {
    width: 50px;
    height: 50px;
    float: left;
    background: tan;
}

之所以可以使用clear属性清除浮动带来的额外影响，还要回归clear属性的本质。

clear属性规定元素的哪一侧不允许其他浮动元素。

本质：在CSS2.1中，clear属性会给清除元素（即设置了clear属性的元素）的上外边距之上添加清除空间，而元素本身的外边距并不改变。再说的详细一些，也就是给元素设置clear:left|right|both时，会使清除元素的上外边距边界刚好在该边上浮动元素的下外边距边界之下。

overflow

在父元素中设置overflow:hidden|auto|scroll可以解决父元素高度塌陷的问题。为什么可以通过overflow来解决父元素高度塌陷的问题？这里涉及到了另外一个知识点，也就是BFC（块级格式化上下文），先看解决方法。原理下篇文章分享。

父元素设置: overflow:hidden|auto;

下面是设置overflow前和overflow后的效果图

:after伪元素

在父元素上增加:after伪元素，可以解决父元素高度塌陷的问题。

//HTML  
<div class="content">
    <div class="float">
        
    </div>
    <p>会给覆盖吗？</p>
</div>

//CSS
.content {
background: tan;
&:after {
        content: \'.\';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}
.float {
    width: 100px;
    height: 100px;
    float: left;
    background: olive;
}

放到浏览器上，父元素高度正常显示。

要理解伪元素解决父元素高度塌陷的方案，需要知道额外的一些知识。

浮动

• 当某个元素发生浮动(left || right)时，该元素会脱离普通文档流。
• 当某个元素发生浮动，并且DOM后面的元素没有文本内容时，此时浮动元素会覆盖掉紧跟其后的元素。
• 当某个元素发生浮动，并且DOM后面的元素具有文本内容时，此时浮动元素同样会覆盖掉紧跟其后的元素，但是文字环绕在float元素周围显示，而不是被覆盖。

什么意思呢？其实仔细思考还是挺好理解的。这里放上一段代码解释前三点。

//HTML与上面的相同，将div换成了span，class换成了float-inline。
//CSS
.float-inline {
    float:left;
    width:100px;
    height:100px;
    background:pink;
}

相应的效果如下。

此时，可以设置宽高说明了内联元素span的行内框变成了块框。同时，在浮动元素同级的下一个元素是具有文本内容的，此时文字就会环绕在float元素的周围。因为浮动元素的存在，父元素高度塌陷了。

伪元素

伪元素，顾名思义是一个在某个元素之后添加内容。

• 伪元素内容的添加必须放在content属性里面。
• 伪元素是行内元素，不过可以通过display改变伪元素的框的类型。

ok，到这里。我们就已经掌握了理解:after伪元素清除浮动所需要的知识了。放上解决方案。按顺序剖析。

.clearfix: { zoom:1 } //触发IE的haslayout. 
.clearfix:after {
    content: \'.\';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

• 设置伪元素的内容为\'.\'，content的内容放什么都可以。
• 设置height:0;
• 设置visibility:hidden。这里是要让content隐藏掉。
• 设置clear:both。 清除伪元素的两侧都不允许出现浮动。
• 最重要的是设置display属性为block，并且只能是block，不能是inline-block。前面也说过，伪元素是行内元素，行内元素是无法设置宽高的。设置display:block，此时元素可以设置宽高，将height:0，此时元素不占据任何高度。如果只设置了前四个属性，而没有改变伪元素的display，将会没有效果。

这里介绍了三种清除浮动带来的额外影响的三种方法，这里所说的额外影响指的是浮动元素给兄弟元素和父元素带来的影响。这里做一个小小的总结：

• 添加空div和:after伪元素的有一个共同的思想：就是使用clear属性。clear属性会给清除元素（即设置了clear属性的元素）的上外边距之上增加清除空间，而元素本身外边距并不改变。并且会使清除元素的上外边距的边界刚好在浮动元素的下外边距边界之下。所以才能达到清除浮动带来额外影响的效果。
• 父元素使用overflow不为visible，也就是设置overflow:hidden|auto，此时也可以达到清除浮动的效果。这里涉及到BFC的概念，下一篇文章分享。

- 此文章转载-转载自:http://www.cnblogs.com/Uncle-Keith/p/6082667.html