引言

在面试中，浮动是面试官经常会问的问题，那么当我们被要求聊聊浮动时，该怎么说才能让面试官拍手连连叫好呢？这篇文章将带你揭开浮动的面纱。

浮动

1.浮动的效果

文字环绕

在CSS中，浮动（float）是一种常见的布局技术，用于控制元素在页面中的位置。通过将元素设置为浮动状态，可以使其脱离正常的文档流，并能够让其他元素环绕在其周围。简单的说浮动就是用来创建文字环绕效果的，我们来看看效果：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img{
            width:100px;
            height: 100px;
            background:red;
            float: left;
        }
    </style>
</head>

<body>
    <div class="img"></div>
    <div class="text">亚太经合组织第三十次领导人非正式会议即将在美国旧金山举行。当前，亚太地区局势总体稳定，区域合作不断取得进展，和平发展、合作共赢是主流。同时，世界进入新的动荡变革期，地缘政治紧张与经济格局演变叠加，冲击亚太地区发展环境和合作架构。国际社会期待此次会议发挥亚太引领作用，凝聚亚太共识，推动各方共同构建开放包容、创新增长、互联互通、合作共赢的亚太命运共同体。</div>
</body>
</html>

让块级元素同行显示

我们设置一个ul中添加三个li，当我们不添加浮动时呈现的效果是这样的：

添加浮动后，我们可以让三个li同行显示：

让行内元素可以设置宽高

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 100%;
            height: 500px;
            background: greenyellow;
        }
        span{
            width: 100px;
            height: 200px;
            margin: 5px;
            background: aqua;
        }
    </style>
</head>

<body>
    <div class = "main">
        <span>123</span><span>456</span>
    </div>
</body>
</html>

此时我们设置了span的行高为200px，宽为100px，我们来看效果：

我们的宽高并没有起到作用，接下来我们添加浮动

此时我们发现宽高已然起了作用。

可以使用margin 但是不能使用margin：0 auto

如果我们要让span居中，我们就不能使用float:left ，这也是浮动元素的一个特性之一。将span设置为块级元素，使用margin: 0 auto 看效果：

css 复制代码

css
span{ 
width: 100px; 
height: 100px; 
/* float: left; */ 
margin: 0 auto;
display: block; 
background: red; }

2.浮动带来的影响

在上面我们可以看到，浮动为我们带来了文字环绕的效果，看起来一切都很完美，但是真的是这样吗？接下来，我们来看浮动所带来的影响。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text{
            width: 100px;
            height: 150px;
            background: blue;
        }
        *{
            margin: 0;padding: 0;
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 100px;
            float: left;
        }
        li:nth-child(1){
            background: orange;
        }
        li:nth-child(2){
            background:greenyellow;
        }
        li:nth-child(3){
            background: yellow;
        }
        .class{
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <div class="clear"></div>
        </ul>
       <div class="text"> hello,world!</div>
    </div>
</body>
</html>

我们创建了三个li并且让li向左浮动，再创建一个盒子显示hello，world，我们设置了li的高度为100px，text的高度为150px，按道理来说我们的text应该要排在li的下面，但是此时我们页面该是怎么样的一个效果呢？

父元素可能会无法正确地计算和撑开自身的高度我们可以看到，text图层被覆盖了！这就是使用浮动时经常碰到的问题：父元素高度塌陷

父元素高度塌陷

当li使用float浮动时，li就脱离了文档流，此时，li不占据我们的页面的高度，text图层将占据页面的最左上方，于是就被li覆盖住了。

3.清除浮动

如何来清除浮动才是回答面试官问题的重中之重，我们有五种方法清除浮动

给父容器设置高度

在上面的代码中，我们给ul设置一个高度

html 复制代码

  ul{
     height: 100px;
    }

我们来看看效果：

确实，给父容器设置高度确实清除了浮动的效果，但是这种方法太low了，这样布局不会考虑用户观看时使用的屏幕大小，就比如用户用电脑看和手机看，页面都是一样大小。一般不使用这个办法。

在最后一个浮动之后添加新的元素，在新元素上做清除浮动 clear: left

html 复制代码

.clear{
     clear: left;
     }

我们在最后一行的li后面添加一行新元素divclass为clear，我们设置clear为left 此时再来看效果：

我们可以看到，效果实现！

在父容器伪元素after上做清除浮动

css 复制代码

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

我们添加ul伪元素，在伪元素中设置clear，我们再来看效果：

在下方被浮动影响的容器上面做清除浮动

css 复制代码

.text{
    width: 100px;
    height: 150px;
    background: blue;
    clear:both
    }

使用这种方法也能有效清除浮动，但是过于繁琐，所以不建议使用

BFC才是清除浮动的神中神，BFC 指的是块级格式化上下文（Block Formatting Context） bfc容器会将浮动元素的高度也计算进去，所以就有效的解决了父容器高度塌陷的问题。那BFC该如何使用？

我们先来看看哪些属性可以创建成BFC：

1.float:left||right

2.position:absolute||fixed

3.display:inline-block 不会脱离文档流

4.display:table-cell....

5.overflow:hidden||auto||overly:scroll

6.弹性盒子(display:flex || inline-flex)

我们创建好BFC容器以后，就可以很好地解决浮动所带来的影响，这里我们略微介绍了一下BFC的相关内容，在下一篇文章中，我们将详细来说说BFC容器。

结尾

当你能倒背如流地告诉面试官这些知识点，我相信你离大厂就又进一步！

面试官喊你来聊聊浮动1.0

引言

浮动

结尾