面试考点（一）：设置浮动后，怎么清除浮动带来的影响

站长

2024年06月05日 12:17 · 阅读数 22

前言

定义

浮动是一种在布局中常用的CSS属性，它使元素脱离文档流，根据指定的方向在父元素中移动。浮动的元素会向左或向右漂浮，并且浮动元素之间可以相互靠近，从而实现页面的布局。通常用来实现多列布局、文字环绕图片等效果。

作用

实现文字环绕效果
导致一个元素脱离文档流
可任意让块级元素水平排列
浮动元素可以用margin，但是不能使用margin：0 auto;

代码分析

代码一

<!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;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="https://img2.baidu.com/it/u=4194115798,4169726391&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714582800&t=3381545a39fe6b784d384f77dc43e683" alt="">
        <p>在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。</p>
    </div>
</body>
</html>

效果图

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

给img设置浮动

  img{
            width: 100px;
            float: left;
        }

效果图

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

分析

设置浮动后，可以实现文字包围图片的效果，并且图片不会遮挡住文字。

给img设置绝对定位

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

效果图

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

分析

给img设置绝对定位时可以实现效果，但是图片会遮挡文字。

代码二

<!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>
        li{
            list-style: none;
        }
        .item{
            width: 200px;
            height: 50px;
        }
        .item:nth-child(1){
            background: #c97171;
        }
        .item:nth-child(2){
            background: #6c86d3;
        }
        .item:nth-child(3){
            background: #668929;
        }
    </style>
</head>
<body>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>
</body>
</html>

效果图

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

现在我们要实现三个li一行排列的效果

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

效果图

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

实现三个li紧挨着

ul{
            font-size: 0;
        }
        li{
            list-style: none;
            font-size: 20px;
        }
        .item{
            width: 200px;
            height: 50px;
            display: inline-block;
        }

效果图

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

浮动元素可以用 margin，但是不能使用margin：0 auto

.item{
            width: 200px;
            height: 50px;
            float: left;
            margin: 10px;
        }

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

.item{
            width: 200px;
            height: 50px;
            float: left;
            margin: 0 auto;
        }

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

分析上面的 margin: 0 auto是没有实现效果的。

代码三

<!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>
        li{
            list-style: none;
            font-size: 20px;
        }
        .item{
            width: 200px;
            height: 50px;
            float: left;
        }
        .item:nth-child(1){
            background: #c97171;
        }
        .item:nth-child(2){
            background: #6c86d3;
        }
        .item:nth-child(3){
            background: #668929;
        }
    </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>

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

分析

原本我们想要的效果是标题在列表下面的，但是由于列表设置了浮动，浮动带来的影响，所以我们就要来清除浮动带来的影响。

解决方案

设置父元素的高度

ul{
            height: 50px;
        }

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

在父元素结束之前添加一个空元素，并设置 clear：both；

  <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <div class="end"></div>
    </ul>

.end{
            clear: both;
        }

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

借助伪元素 ::after 清除浮动

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

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

把父元素设置成BFC 容器(下篇文章单独介绍)

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

 <ul class="clear">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

给后面受影响的元素设置 clear：both；

 .title{
            clear: both;
        }

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

分析

能够观察到清除浮动后ul有了高度。

结语

这五种清除浮动的方法有没有学会呢？下面总结一下吧~

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

下篇文字将介绍一下关于BFC容器的知识点哦，记得来了解了解~

面试考点（一）：设置浮动后，怎么清除浮动带来的影响

转载自:https://juejin.cn/post/7363635167300616219