【前端学习笔记】清除浮动的四种方式

猪猪爱芮芮

已于 2022-04-10 18:03:06 修改

阅读量563

点赞数

分类专栏：前端文章标签：前端 css css3

于 2022-02-09 17:51:32 首次发布

本文链接：https://blog.csdn.net/qq_43118757/article/details/122846690

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

要实现如图布局
在这里插入图片描述
给黄蓝两个盒子设置浮动后导致高度塌陷，如下图。

源代码

<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box"></div>
</body>

.box1,.box2 {
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1 {
            background-color: yellow;
        }
        
        .box2 {
            background-color: blue;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: green;
        }

方法一
给浮动的两个盒子的父盒子设置固定高度

.container {
           height: 200px;
        }

方法二
清浮动——给浮动的盒子下方的盒子设置clear:left;

  .box {
            width: 300px;
            height: 300px;
            background-color: green;
            clear: left;
        }

注：clear:left与float:left向对应
方法三
在浮动元素后面补一个盒子

<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div style="clear: left;"></div> 
    </div>

方法四
给浮动元素的父盒子加overflow: hidden;

  .container {
           overflow: hidden; 
        }

欢迎关注

掘金：https://juejin.cn/user/4156573190724030
Github：https://github.com/zhubingran
CSDN：https://blog.csdn.net/qq_43118757
QQ：1330022055

猪猪爱芮芮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记】清除浮动的四种方式

要实现如图布局给黄蓝两个盒子设置浮动后导致高度塌陷，如下图。源代码<body> <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> <div class="box"></div></body>.box1,.bo
复制链接

扫一扫