放三个div，正常情况下没有浮动是这样的：div从上至下排列
没有浮动的div

<style>
        .div1{
            width: 100px;
            height: 200px;
            background-color: red;
        }
        .div2{
            width: 200px;
            height:100px ;
            background-color: pink;
        }
        .div3{
            width: 400px;
            height: 80px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>

现在我让div1和div2浮动，就成了这样：

.div1{
   width: 100px;
     height: 200px;
     background-color: red;
     float: left;
 }
 .div2{
     width: 200px;
     height:100px ;
     background-color: pink;
     float: left;
 }
 .div3{
     width: 400px;
     height: 80px;
     background-color: yellowgreen;
 }

div3没有设置浮动，本该在下面，为什么也上去了并且在div1和div2的下面呢？因为设置了浮动的元素就脱离了文档流，在页面中不占位置，所以div3就自然而然跑到了上面。

说到脱离文档流要说一下什么是文档流，文档流是 元素按照其在HTML中的位置顺序从上至下(块级元素)，从左至右(行内元素) 排布的位置

第一种方法

那如果我们想让div3排在div1和div2的下面呢，应该怎么做？这时候可以用清除浮动的第一种方法：额外标签法：在需要清除浮动的元素前面放一个空的div，并给这个空div设置属性 clear：both，就变成了这样，达到了我们想要的效果

清除浮动第一种方法

.clearfix{
 	clear: both;
 }
 
 <div class="div1">div1</div>
 <div class="div2">div2</div>
 <div class="clearfix"></div>
 <div class="div3">div3</div>

优点：通俗易懂，方便
缺点：增加了无意义的结构元素，语义化差

第二种方法

我们现在用一个div将这几个div包裹起来，并给这个大div设置背景颜色灰色：
在这里插入图片描述

    <style>
        .box{
            background-color: gray;
        }
        .div1{
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .div2{
            width: 200px;
            height:100px ;
            background-color: pink;
            float: left;
        }
        .div3{
            width: 400px;
            height: 80px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
</body>

因为div1和div2脱离了文档流，造成父元素高度塌陷，大div只包裹住了div3，怎么解决呢？现在我们用到了清除浮动的第二种方法：给父元素设置 overflow 属性为 hidden 或者 auto

.box{
   background-color: gray;
    overflow: hidden;
}
<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</div>

清除浮动第二种方法

优点：代码简洁

第三种方法

我们还可以用清除浮动的第三种方法利用伪元素清除有浮动的标签->在有浮动的标签前面添加一个块级元素
在这里插入图片描述

.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.clearfix:after{
    content:"";
    display: table;
    height: 0;
    visibility: both;
    clear: both;
}
<div class="box clearfix">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</div>

我们可以定义一个类 clearfix ，给这个类里面添加css属性，设置清除浮动的操作，哪里需要清除浮动就给哪里设置这个类

优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

总结

经过以上的尝试，我们可以总结出来清除浮动的三种方法:

额外标签法：在需要清除浮动的元素前面加空 div 并设置 clear 为 both
浮动引起的父元素高度塌陷时，设置父元素 overflow 属性为hidden或auto
after 伪元素清除法浮动

前端-清除浮动的三种方法

第一种方法

第二种方法

第三种方法

总结

猜你喜欢