前端面试热门问题--浮动和清除浮动（CSS）

站长

2024年04月05日 22:23 · 阅读数 4

前言

浮动作为CSS里一个基本的概念，但是在面试过程中，如果面试官问你有关于CSS方面的问题的话，那么浮动出现的概率非常大，今天我们就一起来把浮动搞清楚，面试碰到此类问题再也不用发愁了。

三大元素

在我们开始讲浮动之前，我先来给小伙伴们讲讲块级元素，行内元素，行内块级元素，以便大家更好的理解

块级元素：

默认占据一整行：块级元素在页面上占据一整行，它们会自动换行，每个块级元素从新的一行开始。
可以设置宽高：你可以为块级元素指定宽度和高度，以控制它们的尺寸和形状。

行内块元素：

可以同行显示：行内块元素可以在同一行上并排显示，它们不会强制换行，允许其他元素在同一行内显示。
可以设置宽高：与块级元素类似，行内块元素也可以设置宽度和高度，因此你可以控制它们的大小和形状。

行内元素：

可以同行显示：行内元素默认会在同一行上显示，它们不会强制换行，允许其他元素在同一行内显示。
不可以设置宽高：与块级元素和行内块元素不同，行内元素不允许直接设置宽度和高度。它们的大小通常由其内容的宽度和高度决定，但可以通过其他方式（例如padding和margin）间接影响它们的尺寸。

浮动的概念与特性

概念

浮动是CSS属性，用于控制元素在水平方向上的布局和定位。它使元素能够向左或向右浮动，并允许其他内容环绕它。通常用于创建文字环绕图像、多列布局和导航菜单等。例如，我们想使一个元素向左浮动：

.element {
    float: left;
}

浮动特性

文字环绕

<!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-color: red;
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="img"></div>
    <div class="text">在人生的每个阶段，我们都对漫漫前程抱着一份激动的希望，以为奇迹就在前方。
    然而，人生只是一个个梦想不断破灭的过程。
    而当我们走出所有曲折的日子时才发现，
    真正的美好与神奇，已经永远地留在了背后。</div>
</body>
</html>

这是效果

前端面试热门问题--浮动和清除浮动（CSS）如果我们想将图像或其他元素放置在文本的旁边，可以在.img中加入float: left,这样就可以实现文字环绕的效果啦

前端面试热门问题--浮动和清除浮动（CSS）

让块级元素同行显示

<!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>
        div{
            width: 100px;
            height: 100px;
            /* float: left; */
        } 
        .item1{
            background-color: red;
        }
        .item2{
            background-color: blueviolet;
        }
        .item3{
            background-color:greenyellow ;
        }
    </style>
</head>
<body>
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</body>
</html>

因为div是块级元素，一个div元素占据一整行，所以，三个item分行显示前端面试热门问题--浮动和清除浮动（CSS）如果我们想要他们同行显示，可以在div容器里面加入 float: left,浮动可以让元素脱离文档流，这样就可以让他们同行显示啦

文档流：决定了元素在页面中的位置和布局，元素在文档流中垂直排列，即一个元素会在前一个元素下方。当页面宽度不足以容纳块级元素时，它们会自动换行到下一行。当页面宽度不足以容纳块级元素时，它们会自动换行到下一行。

前端面试热门问题--浮动和清除浮动（CSS）但是我们发现了一个问题

前端面试热门问题--浮动和清除浮动（CSS）父容器body的高度变成0了！这里我们称之为父容器塌陷。

让行内元素可以设置宽高

<!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>
        .container{
            width: 100%;
            height: 200px;
            background-color: green;
        }
        span{
            width: 100px;
            height: 100px;
            /* float: left; */
            background: red;
            margin: 5px; /* 添加间距以使它们不紧密排列 */
        }
    </style>
</head>
<body>
    <div class="container">
        <span>来颗</span><span>奇趣蛋</span>
    </div>
</body>
</html>

上面我们介绍过了，span是行内元素，行内元素是不能设置宽高的，所以效果应该如下前端面试热门问题--浮动和清除浮动（CSS）如果我们想设置行内元素的宽高，可以在行内元素里面加入float: left,效果如下

前端面试热门问题--浮动和清除浮动（CSS）

可以使用margin 但是不能使用 margin: 0 auto;

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

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

前端面试热门问题--浮动和清除浮动（CSS）

清除浮动

浮动在网页布局中是一个有用的工具，但它也可能引发一些不良影响，特别是在不正确使用时。就比如上述第二点，父容器高度塌陷，当我们在计算高度之类的问题时可能会出现问题。 清除浮动（Clearing Floats） 是一种在使用CSS浮动布局时经常需要采用的技术，主要是为了解决由浮动元素可能引发的一些常见问题。

防止父元素坍塌（Collapsing Parent） ：当父元素包含浮动元素时，父元素可能会"坍塌"，导致高度计算不准确。清除浮动可以确保父元素包含浮动元素，使其高度得以正确计算，而不塌陷。
避免影响其他元素（Avoid Impact on Other Elements） ：浮动元素可能会影响其他元素的布局，特别是文本环绕浮动元素时。清除浮动可以确保元素不受浮动元素的影响，使布局更可控。

这里我们有几个方法可以清除浮动

<!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;
      float: left;
    }
    li:nth-child(1) {
      background: #da8383;
    }
    li:nth-child(2) {
      background: #e1e941;
    }
    li:nth-child(3) {
      background: #6ceb50;
    }
    .text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
    }


  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <div class="text">Hello World</div>

  </div>
</body>
</html>

前端面试热门问题--浮动和清除浮动（CSS）我们发现了这样一个问题，text原本的高度被ul li 浮动元素覆盖掉了，这样导致了我们的布局出现了问题，我们可以用下面几种方法来解决

给父容器设置高度

这个办法很简单，但是这样布局不会考虑用户观看时使用的屏幕大小，就比如用户用电脑看和手机看，页面都是一样大小。一般不使用这个办法。

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

在最后一个浮动元素<li>3</li> 的后面添加新的元素，给新元素做clear: left ，若是右浮动，则clear: right,若两边浮动都有,则clear:both

//CSS
 .clear-float {
        clear: left; /* 清除浮动 */
}
<div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <div class="clear-float"></div>
    </ul>

    <div class="text">Hello World</div>
    

  </div>

前端面试热门问题--浮动和清除浮动（CSS）但是如果使用浮动元素很多的情况下，要设置很多新的元素，代码会繁琐很多，一般不使用此方法

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

.text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
      clear: left;
    }

代码实现效果一样

前端面试热门问题--浮动和清除浮动（CSS）一般也不使用此操作，每个容器都添加，也会十分繁琐

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

    .clear::after{
      content: '';
      clear: both;
      display: block;
    }
    <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>

前端面试热门问题--浮动和清除浮动（CSS）

这个办法使用伪元素的特点，是一个好办法

BFC

这也是一个很不错的方法，今天内容已经很多了，小伙伴消化一下，我们留着下次再介绍吧。

今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧