css——消除浮动

最新推荐文章于 2022-04-06 17:32:38 发布

恨灵犀

最新推荐文章于 2022-04-06 17:32:38 发布

阅读量250

点赞数

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

本文链接：https://blog.csdn.net/henlingxi/article/details/122361659

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、为什么消除浮动

在很多情况下，我们不知道父盒子中需要几个子盒子不方便给父盒子高度，因此我们通过子盒子来撑开父盒子的高度。但是当子盒子浮动时，父盒子的高度将变成0，这将影响下面的标准流盒子。因此我们需要消除浮动。

<style>
       .father{
           width: 500px;
           background-color: seagreen;

       }
       .one{
           float: left;
           width: 100px;
           height: 200px;
           background-color: purple;
       }
       .tow{
           float: left;
           width: 100px;
           height: 200px;
           background-color: red;
       }
       .uncle{
           width: 250px;
           height: 250px;
           background-color: wheat;
       }
    </style>
</head>
<body>
  <div class="father">
        <div class="one"></div>
        <div class="tow"></div>
  </div>
  <div class="uncle"></div>
</body>