前言

在前端面试中，能问到CSS的问题不多，而清除浮动是CSS问题的重点之一。很多学习前端的同学对浮动已经有所认识，但面试时被问到清除浮动，仍然不知该怎么样去全面的回答。所以我总结了关于面试中CSS浮动以及清除浮动的一些问题，希望可以帮助到大家。

浮动-float

float属性只有 left 和 right 两个可以设置的值，即向左向右浮动，不存在向上或者向下浮动

浮动主要具有以下特性：

1.文字环绕

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

3.元素脱离文档流，父容器的高度塌陷

4.浮动元素可以让行内元素可以设置宽高

5.浮动元素可以设置margin，但是不能用margin:0 auto居中；

以下我们来详细解释帮助理解：

1> 文字环绕

当要实现一个块级元素被文本包裹时，这时我们可以将被包裹的块级元素设置浮动属性float

<style>
    .pic{
         width:150px;
         height:150px;
         float: left;
    }
    .pic img{
         width: 100%;
    }
</style>
<body>
    <div class="pic">
        <img src="https://tupian.qqw21.com/article/UploadPic/2018-6/20186112015229557.jpg" alt="">
    </div>
    <div class="text">
        随着人工智能技术的快速发展，自然语言处理领域的研究取得了巨大的进展。ChatGPT，即Chat(聊天) Generative Pre-trained Transformer(生成式预训练转换器)，是OpenAI公司最新发布的尖端模型。它采用了预训练和微调的两个步骤，能够根据输入的问题产生相关且连贯的回答，实现智能聊天的功能。
    </div>
</body>

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

3> 浮动元素脱离文档流，父容器的高度塌陷

将块级元素设置浮动属性，可以同行显示，这里和弹性容器有一样的效果，但设置弹性属性是在父级容器上。

举例2，检查浏览器可以发现，父容器的实际高度为0，所以设置浮动属性的块级元素脱离文档流，使父容器高度塌陷。

<style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      float: left;
    }
    .item1{
      background-color: #32f1ff;
    }
    .item2{
      background-color: #48fca2;
    }
    .item3{
      background-color: #fc5b53;
    }
 </style>
 <body>
  <div class="item1">one</div>
  <div class="item2">two</div>
  <div class="item3">three</div>
</body>

再举例3，若只将上面块级容器的第二个设置浮动属性 float:left; 可以看到只有两个容器，这是因为第二个容器设置浮动属性后，脱离文档流，原本都未设置浮动属性时的第三个容器应该在第二个容器的下方，此时却因为第二个div容器脱离文档流而上移到第二个容器的位置，也就是此时是第二个div容器覆盖在第三个容器上了，所以看不到第三个div容器。而第三个容器内的文本 three 显示在下方是因为文字环绕效果。

    div{
      width: 100px;
      height: 100px;
      border: 1px solid #000;
    }
    .item1{
      background-color: #32f1ff;
    }
    .item2{
      background-color: #48fca2;
      float: left;
    }
    .item3{
      background-color: #fc5b53;
    }

4> 浮动元素可以让行内元素可以设置宽高

行内元素本不可以设置宽度和高度，将行内元素设置浮动属性后就可以设置其宽度和高度

<style>
    span{
      width: 100px;
      height: 100px;
      background-color: #f29a9a;
      float: left;
    }
 </style>
 <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

5> 浮动元素可以设置margin，但是不能用margin:0 auto居中

在面试中也可能被问到：设置了浮动属性的块级元素是否可以设置 margin 属性，这时我们要注意，原本行内元素不能使用margin属性，在设置了浮动属性后，其可以使用 margin 来设置外边距，但是不能使用 margin:0 auto; 来将其水平居中

<style>
    .box{
      width: 300px;
      height: 200px;
      border: 1px solid #000;
    }
    span{
      width: 100px;
      height: 100px;
      background-color: #f29a9a;
      float: left;
      margin: 0 auto;
    }
</style>
<div class="box">
    <span>1</span>
 </div>

清除浮动

清除浮动，就是保留需要的效果，而解决浮动带来的负面效果问题

主要问题：解决父容器高度塌陷问题

方法1：直接设置父容器的高度（不推荐，因为这样无法使高度自适应）

在上面描述父容器高度塌陷特性时的例1中，我们给body直接设置高度为 150px ，可以看到body的高度不再是0

body{
   height: 150px;
}

方法2：添加一个辅助空容器并设置属性clear

clear属性可以设置left、right、both，若设置前两者需要与前面容器浮动属性float的值一样

注：部分情况不适用

<style>
     *{
         margin: 0;
         padding: 0;
     }
     ul li{
         width: 100px;
         height: 100px;
         margin-left: 20px;
         list-style: none;
         background-color: #ce6565;
         float: left;
     }
     .clear{
         clear: both;
     }
</style>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <div class="clear"></div>
        </ul>
    </div>
</body>

方法3：利用伪元素设置其 display:block; 块级元素并设置clear清除浮动

在例5中不用辅助容器，并设置伪元素后，效果一致

注：这里不能用 before 伪元素

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

方法4：给之后受影响的容器添加 clear:both;(不推荐，因为自己错了还要我帮擦屁股？)

在例5中不用前面方法，在ul后添加一个div容器，div会因为前面浮动元素脱离文档流而上移，给这个div容器添加clear属性，使其正常显示在浮动元素下面

<style>
    .content{
        width: 200px;
        height: 100px;
        background-color: #2a23b1;
        clear: both;
    }
</style>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="content"></div>
</body>

添加clear前

添加clear后

方法5：借助BFC容器的特点，抵消浮动的负面影响（重要考点）

在例5中将ul变成BFC容器，可以解决容器高度塌陷，而不影响后面容器

    ul{
        overflow: hidden;
    }

这里可以理解BFC容器是一个很牛很牛的容器，即便子容器浮动也不会让自己高度塌陷。而设置属性变成BFC容器的方法有很多种，常有 overflow:hidden; overflow:aoto; display: table-cell;等等，需要去背

注：将父容器设置 float:left; 同样可以恢复父容器高度，但是由于父容器还是浮动元素，还是会影响后面容器，所以一般不使用

前端面试中的清除浮动 - 精解

前言

浮动-float

清除浮动