清除浮动方法一

chill_ly

已于 2022-03-01 20:32:07 修改

阅读量39

点赞数

分类专栏：一阶段

于 2022-03-01 18:13:39 首次发布

本文链接：https://blog.csdn.net/qq_53640252/article/details/123212211

版权

css html css3

一阶段专栏收录该内容

13 篇文章 0 订阅

订阅专栏

给受到浮动影响的元素添加 overflow:hidden；

- 因为overflow属性会触发 BFC

BFC: block formatting context 块级格式化上下文

- 让元素强制按照块元素的规则进行排列


<style>

        .box1{

            width: 100px;

            height: 100px;

            background-color: red;

            float:left;

        }

        .box2{

            width: 200px;

            height: 200px;

            background-color: green;

            float:left;

            overflow: hidden;

        }

        .box3{

            width: 200px;

            height: 200px;

            background-color: yellow;

            overflow: hidden;

        }

    </style>

    <div class="box1">box1</div>

    <div class="box2">box2</div>

    <div class="box3">box3</div>