浮动与BFC，全程干货分享

最近好乐
140 阅读6分钟

前言

在面试时，面试官向你问问题的时候都是简单明了，可能都不会具体问你哪方面的东西，面试官问你很有可能就是直接说：浮动你知道多少？ 那么该怎么回答呢。小编来给大家一份这类问题的套路。

  1. 浮动是什么
  2. 浮动的作用、特征
  3. 浮动带来的负面影响以及如何消除浮动

很多人可能回答这个问题的时候只会说出浮动简单的概念，作用，但是这里其实面试官最想听到的是你会如何去清除浮动。

浮动

浮动有以下几大特点：
1.主要实现文字环绕效果
2.导致一个元素脱离文档流
3.可以让块级元素水平排列
4.浮动元素可以用margin 但是不能使用 margin: 0 auto;

清除浮动

我们所说的清除浮动并不是清除浮动的效果，而是要清除浮动带来的负面影响。浮动会有哪些负面影响呢？
浮动会将此时的元素飘起来，导致后面的div盒子会上移。
浮动之后的父容器会进行坍塌，最后的高度为真正子容器的高度，也就是说，浮动的元素会脱离文档流，导致子元素无法撑开父元素的高度，从而会影响后面的元素排版。

为了清除浮动带来的负面影响，我们有以下五种方法来实现：

  • 1.设置父元素的高度
  • 2.在父元素结束之前添加一个空元素，并设置 clear:both;
  • 3.借助伪元素::after清楚浮动
  • 4.给后面受影响的元素设置 clear:both;
  • 5.把父容器设置成BFC容器 overflow:hidden;

我们先来看一个案例：
给出一个无序列表里面放3个li，每个序号都去掉前面的符号后设定大小颜色使其成为方块最后再加入一个盒子，如下：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 100px;
        }
        li:nth-child(1){
            background: red;    
        }
        li:nth-child(2){
            background: black;     
        }
        li:nth-child(3){
            background: green;     
        }
        .text{
            width: 100px;
            height: 200px;
            background: blue; 
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="clear">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="text">神州十七号</div>
    </div>
</body>
</html>

效果如下：

Snipaste_2024-05-08_00-16-35.png 他们都是块状元素，每个占一行。

我们现在在ul li的样式中添加向左浮动：

        ul li{
            list-style: none;
            width: 200px;
            height: 100px;
            float: left;
        }

效果如图：

Snipaste_2024-05-08_00-16-56.png 为什么上面1，2，3三个盒子在同一行呢？ 整个ul中所有的元素都浮动了，于是三个盒子都来到了浮动这一层，这一层也需要排队，此时排队的方式变化了，可以同行显示 大家有没有发现一个点，就是这里的ul的高度变0了。
如图：

Snipaste_2024-05-08_00-25-45.png

1113.33 * 0 这里的高度居然为0？！为什么呢？就是刚刚上面说的一句话：浮动之后的父容器会进行坍塌，最后的高度为真正子容器的高度，我们这里的浮动是写在ul 里面的li中的，ul此时作为父容器的存在，一旦子元素浮动也就是脱离文档流之后，不再作为父容器的子容器。所以最后父容器支撑高度为0。 而文本神舟十七号这个盒子是和ul这个盒子同级的，ul高度为0，所以我们的文本盒子会被ul覆盖掉其中一部分。
所以我们如何解决掉这个问题呢，也就是让神州十七号这个盒子可以正常下移呢？
上面给出了五种方法：

  • 1.设置父元素的高度
    这点很简单，直接给父容器设置一个高度，写死它，像案例中我们直接给ul加一个高度就行了
ul{
    height: 100px;
  }

但是这样没有考虑到用户设备屏幕的大小，不建议使用。

  • 2.在父元素结束之前添加一个空元素，并设置 clear:both;
<ul>     
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <div class="clear"></div>
</ul>

然后在clear盒子里面写一个属性clear: both;

.clear{
            clear: both;
      }

clear: both这个属性，clear是为浮动量身定制的属性，就是走到</ul>这个闭标签时，就阻止了它，让它不能浮动。这样写比第一点方法好一点，但是代码也不够优雅，因为大公司的项目一般都很大，每次都这样写一个盒子去挡浮动，不太现实，也不建议采纳

  • 3.借助伪元素::after清楚浮动 我们先给父容器ul添加一个class 名为clear
 <ul class="clear">  
        <li>1</li>
        <li>2</li>
        <li>3</li>
 </ul>

后在样式里写一个伪元素，里面用clear: both;

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

伪元素其实不属于三大类元素之一，所以我们需要将这个伪元素设置成块级元素。这个方法还不错，在这五个里面排第二。

  • 4.给后面受影响的元素设置 clear:both;
    直接处理受害
    what?! 好好好 还能这样玩是吧？ 你闯的祸还要我来承担是吧。谁的锅谁来背啊，怎么能改变受害者！而且后面受影响的元素还有很多呢，这样改也不太现实啊，不建议不建议。
  • 5.把父容器设置成BFC容器 overflow:hidden;
    这点就是我们今天要着重讲的一点了，也是特别重要的：

BFC

BFC(Block Formatting Context) 表示“块级格式化上下文”，它是CSS布局中的一个重要概念，用于控制块级元素在页面上的布局和定位

#BFC的布局规则

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. BFC容器内部和外部的容器相互隔离，互不影响。----解决margin重叠问题
  3. BFC容器内，相邻元素的margin在垂直方向上会重叠，在水平方向上不重叠。 4.BFC容器在计算高度时，浮动元素也参与计算。

BFC容器也可以解决margin 重叠问题。

那么哪些属性可以创建BFC呢？
给父容器设置以下属性

1.overflow: hidden || auto ||overlay ||scroll
2.floot left ||right
3.position: fixed || absolute 
4.display: inline-block
5.display: table-cell || table-xxx
6.display: flex || inline-flex

解释第一个属性overflow:

这个属性应该是BFC容器的高频考点了，用得非常多，hidden是超出则隐藏，overlay是超出则覆盖，auto是超出显示滚动条，scroll是即使没有超出也有滚动条。
OK,今天的分享就到这里结束了。如果觉得本文对你有帮助的话能帮忙点个免费的赞赞嘛，感谢感谢！

avatar
文章
阅读
粉丝