当面试被问到“怎么清除浮动？”，该怎么回答？

L_言覃
1,497 阅读6分钟

前言

浮动是什么

float 是一种用于控制元素布局的属性。当你将一个元素设置为 float: left; 或者 float: right; 时，它会脱离正常文档流，向左或向右浮动，允许其他元素环绕在其周围。 这种技术通常用于创建多列布局或实现图文混排效果。需要注意的是，使用浮动可能会影响布局，特别是在父元素的高度计算、清除浮动、以及响应式设计中。

浮动能实现哪些效果

  • 实现文字环绕效果

  • 导致一个元素脱离文档流

  • 可以让块级元素水平排列

  • 浮动元素可以用 margin, 但是不能用 margin: 0 auto;

示例一

<!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>Document</title>
    <style>
        img{
            width: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://gips2.baidu.com/it/u=3419425165,837936650&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" alt="">
        <!--p是块级标签 -->
        <p>老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字
            老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字 老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字 老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字老鼠偷吃糖果，小巧灵活的身体，厨房环境，高清分辨率，可爱风格，夸张，自然光，细腻的线条，皮克斯，色彩丰富，全息色，空间，精美细节，数字
        </p>
    </div>
</body>
</html>

实现效果

image.png 分析

因为 p 标签是块级标签，所以文字不会和图片去到同一行。

  • 给img设置属性
 img{
     width: 100px;
     float: left;
}

实现效果

image.png 分析

出现文字环绕效果，根本原因是float使img标签脱离文档流，所以和p标签重叠。

还可以通过定位来脱离文档流

img{
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
}

实现效果

image.png

分析

定位也能脱离文档流，且会盖住文字

示例二

<!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>Document</title>
    <style>
        li{
            list-style: none;
        }
        .item{
            width: 200px;
            height: 50px;
        }
        .item:first-child{
            background-color: red;
        }
        .item:nth-child(2){
            background-color: blue;
        }
        .item:last-child{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>
</body>
</html>

实现效果

image.png

分析

li是块级元素，所以不会在同一行

如何设置到同一行去？

可以设置行内块元素

.item{
    width: 200px;
    height: 50px;
    display: inline-block;
}

实现效果

image.png

如果设置行内display: inline;那么width和height就会失效

image.png

分析

图中会发现元素之间有缝隙，是换行导致的，要去掉就可以给ul设置属性。去掉换行字符，但是要在li标签中重新设置font-size: 20px;不然图片中的1， 2 ，3会消失

 ul{
    font-size: 0;
}
li{
    list-style: none;
    font-size: 20px;
}

image.png

但是直接给img设置float属性可以直接实现上图效果

.item{
    width: 200px;
    height: 50px;
    /* display: inline-block; */
    float: left;
}

分析

浮动可以让块级元素同行显示

50c1ff6b66984967368fee685212fdb2.png 分析

ul的高度变为0，因为ul的子容器li全部脱离文档流，于是浏览器不会按照正常的页面布局来对待它，子容器就没有办法撑起父容器的高度。

浮动元素可以设置margin，但是不能设置margin: 0 auto

设置margin

.item{
    width: 200px;
    height: 50px;
    /* display: inline-block; */
    float: left;
    margin-right: 10px;
}

image.png

右边距多了10px

如果设置margin: 0 auto

上下为0，左右为auto自适应，即水平居中，但是在浮动元素中不会产生任何效果。

清除浮动(面试常考)

为什么要清除浮动？

因为浮动会导致一个父容器的高度塌陷，进而影响其他元素的布局。所以我们需要清除浮动在布局当中带来的负面影响，让子元素浮动而父容器的高度不要塌陷。

怎么清除浮动

  • 直接设置父容器的高度
  • 在父容器结束之前添加一个空元素，并设置 clear: both;
  • 借助伪元素 ::after{}清除浮动
  • 把父容器设置成BFC容器
  • 给后面受影响的元素设置 clear: both;

示例一

<!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>Document</title>
    <style>
        li{
            list-style: none;
            font-size: 20px;
        }
        .item{
            width: 200px;
            height: 50px;
            float: left;
        }
        .item:first-child{
            background-color: red;
        }  
        .item:nth-child(2){
            background-color: blue;
        }
        .item:last-child{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>
    <div class="title">这是标题</div>
</body>
</html>

实现效果

image.png

于是想要实现 这是标题 出现在下方而不是和ul在同一行。

方法一： 直接给ul设置高度

ul{
    height: 50px
}

实现效果

image.png

这种方法需要知道子容器的所有高度才能设置一个合适的高度，极其麻烦，不好用。

方法二： 在父容器结束之前添加一个空元素，并设置 clear: both;

<!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>Document</title>
    <style>
        li{
            list-style: none;
            font-size: 20px;
        }
        .item{
            width: 200px;
            height: 50px;
            float: left;
        }
        .item:first-child{
            background-color: red;
        }  
        .item:nth-child(2){
            background-color: blue;
        }
        .item:nth-child(3){
            background-color: green;
        }
        ul{
            height: 50px;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <div class="clear"></div>
    </ul>
    <div class="title">这是标题</div>
</body>
</html>

实现效果

image.png

方法三：借助伪元素 ::after{}

.clear::after{
    content: '';
    clear: both;
    display: block;
}

伪元素一定要加content属性，里面放什么值不重要，并且伪元素一定要设置为块级元素，否则清除浮动不会生效，所以一定要加display: block;

实现效果 image.png

方法四：将父容器设置成BFC容器(下篇文章单独介绍)

ul{
    overflow:
}

实现效果

image.png 方法五：给后面受影响的元素设置 clear: both;

.title{
    clear: both
}

注：这种方法并不好，会使布局变得很乱。但也能清除浮动

实现效果

image.png

结语

学会了自己也来敲敲代码试试看吧

Thanks.jpg

avatar
文章
阅读
粉丝