为什么要清除浮动以及清除浮动的方法

最新推荐文章于 2023-04-27 11:08:06 发布

FrankYu_

最新推荐文章于 2023-04-27 11:08:06 发布

阅读量460

点赞数 1

分类专栏：浮动文章标签：前端浮动清除浮动

本文链接：https://blog.csdn.net/FrankYu_/article/details/79269023

版权

浮动专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、理解浮动

在刚刚接触前端的时候，我们往往会听到“浮动”这二字。我们或许会有以下两点疑问：什么是浮动？为什么要用到浮动？

什么是浮动？我们要理解他的核心：具有浮动属性的元素，会脱离原来的文档流，根据设定的浮动方向，向左或者向右浮动， 直到触碰到了父容器的边框，或者是触碰到另外一个浮动元素。

而想要更好的理解浮动属性的核心，我们需要了解设置浮动的初衷。

浮动的初衷是什么？即通过给图片设置浮动，从而达到文字环绕效果。

下面简单的看一个demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{width: 300px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="pic"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt=""></div>
        <div class="text">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
    </div>
</body>
</html>

这是在没有给图片设置浮动属性的情况下，由于块级元素独占一行，会造成文本另起一行。

而给图片加上一个左浮动的样式以后，就会产生文字环绕的效果。

由设计初衷我们发现，如果给两个元素分别设置左浮动和右浮动，且两个元素宽度相等，岂不是可以做到

在同一行显示的内联排列布局？由此，浮动布局应运而生。

二、浮动造成的影响

浮动造成的影响：父容器高度塌陷。

什么是高度塌陷？即在父容器内的元素浮动之前，如果父容器没有设置高度，那么他是由容器内部的元素

的高度撑开的，但当父容器内的元素浮动之后，就会脱离容器，导致父容器的高度为0，称为高度塌陷。

下面看一个demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{border:2px solid #F00;}
        .box1{width: 100px;height: 100px;background-color: #e8e8e8}
        .box2{width: 100px;height: 100px;background-color: #e3b2a5}
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

在添加浮动样式前：

而给box1,box2，分别增加左浮动之后，效果如下：

我们会发现，浮动的box脱离父容器之后，父容器的高度就没了，这就是所谓的高度塌陷。假如在我们布局的时候发生了

高度塌陷，那么原本置于父容器之下的另外一个容器便会顶上来，破坏布局。

由此我们得知，所谓清除浮动，就是指解决父容器的高度塌陷问题，从而保证原来的布局不被破坏。

三、清除浮动的方法

方法一：在父容器的末尾，增加一个新的标签标签 <div style="clear:both;"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{border:2px solid #F00;}
        .box1{float:left;width: 100px;height: 100px;background-color: #e8e8e8}
        .box2{float:left;width: 100px;height: 100px;background-color: #e3b2a5}
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

效果如图：

缺点：增加了无意义的div标签

方法二：给父容器本身设置一个高度。

缺点：只能用于父容器高度固定的布局，而且可重用性不高。

方法三：方法2：给父元素设置overflow:hidden; zoom:1;这种方法的根本是触发了BFC，（在低版本的IE

浏览器下，则是触发了haslayout，关于BFC和haslayout的内容，以后可能会更新博客详细介绍。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{border:2px solid #F00;overflow: hidden;zoom:1;}
        .box1{float:left;width: 100px;height: 100px;background-color: #e8e8e8}
        .box2{float:left;width: 100px;height: 100px;background-color: #e3b2a5}
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

效果如图：

方法四：让父元素本身也浮动，但因副作用较大，只需了解。

方法五：给父元素设定display:inline-block

缺点：会导致父容器宽度丢失，如下图。与上面的图片相比，我们会发现原本给父容器填充的背景不见了

这就是因为它的宽度丢失。

方法六、给父元素添加after伪类和zoom的方法，也是最推荐的方法。代码的解释在注释当中

效果如图：

注意：clearfloat是添加在浮动元素的父容器当中的，并非直接添加在浮动元素上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{border:2px solid #F00;display: inline-block;width: 300px;}
        .box1{float:left;width: 100px;height: 100px;background-color: #e8e8e8}
        .box2{float:left;width: 100px;height: 100px;background-color: #e3b2a5}
        .clearfloat:after{
            content: ".";/*生成内容作为最后一个元素*/
            display: block; /*使生成的元素以块级元素显示，占满剩余空间*/
            height: 0;/*保持父容器的高度*/
            clear: both;/*闭合浮动*/
            visibility: hidden; /*使生成内容不可见，而且不影响原来父容器内容的点击与交互*/

        }
        /*在张鑫旭老师的视频中讲到，clear也可以采取下列方法简写：
         .clearfloat:after{
            content: ".";
            display: table;          
            clear: both;
                        }*/
        .clearfloat{
            zoom:1;/*触发低版本浏览器的haslayout*/
        }
    </style>
</head>
<body>
    <div class="container clearfloat">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>