前端新手坑之float：left

最新推荐文章于 2022-05-09 12:41:54 发布

六个番茄

最新推荐文章于 2022-05-09 12:41:54 发布

阅读量3w

点赞数 20

分类专栏：前端文章标签： float：left 加入float：left背景消失 float：left详解背景消失不见

本文链接：https://blog.csdn.net/LiuGeFangQie/article/details/88606236

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

相信很多刚学前端的同学们，都会遇到这样一个问题：我的背景（图片）怎么突然消失不见了，而且找不到原因。

float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上

例子1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .one{
            width: 400px;
            height: 400px;
            background: red;
        }
        .one div{
            float: left;

        }
        .one-l{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .one-r{
            width: 200px;
            height: 200px;
            background: gray;
        }
        .clear{
            clear: both;

        }
    </style>
</head>
<body>
    <div class="one">
        <div class="one-l"></div>
        <div class="one-r"></div>
    </div>
</body>
</html>

e.g.：one是父盒子，one-l、one-r是子盒子；

例子1：当父盒子有宽度和高度时，是能显示出来背景的，之后不论怎么使用float：left；都是不会造成背景丢失的；
（总结：当父盒子的背景丢失时，不妨先给父盒子加个高度和宽度，这是最简单粗暴的方法）

第一种情况：子盒子的宽度和高度小于父盒子的宽度和高度，背景能正常显示，子盒子都在父盒子中。
在这里插入图片描述
第二种情况：子盒子高度宽度大于父盒子的高度宽度时，父盒子的背景是能显示的，子盒子宽度超出父盒子。（我这边是将one-r宽度改成500px）

例子2代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .one{
            background: red;
        }
        .one div{
            float: left;

        }
        .one-l{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .one-r{
            width: 500px;
            height: 200px;
            background: gray;
        }
        .clear{
            clear: both;

        }
    </style>
</head>
<body>
    <div class="one">
        <div class="one-l"></div>
        <div class="one-r"></div>
        <div class="clear" style="float:none;"></div>
    </div>
</body>
</html>

例子2：父盒子都没有宽度和高度，当父盒子没有宽度和高度时，它是靠子盒子的宽高来撑开的，所以说当你子盒子的float状态下的话，子盒子现在是浮动状态（你可以想象成子盒子现在的漂浮在父盒子上，父盒子被压在子盒子底下）现在的父盒子没有被子盒子撑开，父盒子没有宽和高。
（总结：可以在父盒子下加个<div class=“clear” style=“float:none;”></div>，用clear：both清除浮动）

第一种情况：可以看到，背景是没有显示出红色的；

第二种情况：加入clear：both；清除浮动，可以看到如下效果。浮动被清除，父盒子有了高度被撑开，而因为div是块元素，它占据的是一整行。
在这里插入图片描述
如果不想父盒子占据一整行，可以给父盒子加个宽度。

六个番茄

关注

20
点赞
踩
81

收藏

觉得还不错? 一键收藏
3
评论
前端新手坑之float：left

相信很多刚学前端的同学们，都会遇到这样一个问题：我的背景（图片）怎么突然消失不见了，而且找不到原因。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上例子1代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="...
复制链接

扫一扫