css：清除浮动的三种方式及其原理

Posted xisghiu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css：清除浮动的三种方式及其原理相关的知识，希望对你有一定的参考价值。

清除浮动的三种方式及其原理
浮动元素的特性
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素带来的问题
因为浮动元素脱离文档流，所以对于其处于正常文档流中父元素，无法获知其高度，导致父元素自身的高度塌陷（失去浮动元素占据的高度）。

清除浮动的三种方式
设置float

overflow:hidden;
<div style="overflow:hidden;zoom:1;">
    <p style="float: left;">使用overflow:hidden 清除浮动</p>
</div>
 


 
其中，zoom:1;用于兼容IE6。

clear:both;
<style>
.clearfix:after
    /*START 真正起到清除浮动的代码*/
    content: '';
    display: block;
    clear: both;
    /*END 真正起到清除浮动的代码*/
    height:0;

.clearfixdisplay: inline-block; /* for IE/Mac */
</style>
<div class="clearfix">
    <div style="float: left;">clear:both ;son div</div>
</div>
 
清除浮动本质上是说要清除浮动元素带来的一些影响（例如高度塌陷）。在上面的例子中，我们给 :after伪元素添加了clear:both;属性,为了解释这个属性的作用，我们看下面的一段代码。

<div style="width: 150px; border: 1px solid #ccc;">
    <div style="width: 100px; background: greenyellow;">div1</div>
    <div style="width: 100px; background: blueviolet; float:left;">div2</div>
    <div style="width: 120px; background: grey; clear:left;"></div>
</div>

<div style="width: 150px; border: 1px solid #ccc; margin-top: 20px;">
    <div style="width: 100px; background: greenyellow;">div1</div>
    <div style="width: 100px; background: blueviolet; float:left;">div2</div>
    <div style="width: 120px; background: grey;  "></div>
</div>
 

clear:left;会让元素跟在其左侧浮动元素的后面，而不会忽略前面的浮动元素，位于浮动元素后面。 同理，clear:right;则会清除元素右侧浮动元素的影响。 而clear:both;就是清除左右两侧的影响。

另外一种方式position:absolute;
不推荐这种方式，因为这需要改变父元素本身的position属性。也许在某种情况下，你可以修改。但是，如果你不能修改怎么办？？

<div style="position:absolute;">
    <div style="float: left;">postion:absolute clear float</div>
</div>
 
之所以会提到这个方式，是为了说明 前面两种方式（设置float和overflow:hidden;）清除浮动的原理：当给父元素设置overflow:hidden属性时，实际上父元素本身形成了一个BFC(Block Formating Context)。

独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

形成一个BFC的情况：

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
————————————————
 

清除浮动的三种方式

清除浮动的三种方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 清除浮动</title>
    <style>
        .son_1 
            float: left;
            width: 300px;
            height: 200px;
            background-color: greenyellow;
        

        .son_2 
            float: left;
            width: 300px;
            height: 200px;
            background-color: skyblue;
        

        .info 
            width: 300px;
            height: 400px;
            background-color: gray;
        

        /* 第三种 */
        .son_3 
            clear: both;
        

        /* 第二种 */
        .one::after 
            content: '';
            /* 必须写成块级元素 */
            display: block;
            /* 我又不需要看见这个元素,对布局不会又=有影响 */
            height: 0;
            /* 核心代码 */
            clear: both;
            /* 隐藏掉这个盒子 */
            visibility: hidden;
        

        /* 第三种 */
        .one::after,
        .one::before 
            content: '';
            /* 控制表格在一行 */
            display: table;
        

        .one::after 
            clear: both;
        
    </style>
</head>

<body>
    <div class="one">
        <div class="son_1"></div>
        <div class="son_2"></div>
        <!-- <div class="son_3"></div> -->
    </div>
    <div class="info">
    </div>
</body>

</html>

以上是关于css：清除浮动的三种方式及其原理的主要内容，如果未能解决你的问题，请参考以下文章

Web前端-CSS基础与应用

Web前端-CSS基础与应用

CSS基础知识四浮动清除浮动

css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

0023 浮动：float清除浮动

清除浮动的三种方法