css清除浮动的总结与 BFC

最新推荐文章于 2024-04-29 16:58:49 发布

程序员Better

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量223

点赞数 1

分类专栏： css与布局文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/pz1021/article/details/105398501

版权

css与布局专栏收录该内容

6 篇文章 11 订阅

订阅专栏

清除浮动

css使用了浮动导致了父元素的塌陷问题要是用清除浮动
父盒子塌陷了

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {      
        background: red;
      }
      .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .box2 {
        float: right;
        width: 400px;
        height: 100px;
        background: cyan;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

在这里插入图片描述

1 .clear清楚浮动

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {      
        background: red;
      }
      .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .box2 {
        float: right;
        width: 400px;
        height: 100px;
        background: cyan;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div style="clear: both;"></div>
    </div>
  </body>
</html>

在这里插入图片描述

2 . overflow: hidden

给父盒子添加 overflow: hidden

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {   
        margin: 60px;
        width: 900px;   
        background: red;
        overflow: hidden;
      }
      .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .box2 {
        float: right;
        width: 400px;
        height: 100px;
        background: cyan;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

3 伪类 (常用)

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .container {
      margin: 60px;
      width: 900px;
      background: red;
      *zoom: 1;
    }

    .container::after {
      content: "";
      display: block;
      /* 不能少 */
      visibility: hidden; 
       /* 元素是不可见的。 */
      clear: both;
      overflow:hidden;
    }

    .box1 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .box2 {
      float: right;
      width: 400px;
      height: 100px;
      background: cyan;
    }
  </style>
</head>

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

</html>