浮动模型以及清除浮动流的方法

野生小米椒

已于 2022-11-01 17:26:00 修改

阅读量277

点赞数

分类专栏：三大基础语言文章标签： css

于 2020-09-09 15:32:05 首次发布

本文链接：https://blog.csdn.net/x1037490413/article/details/108485060

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

文章目录

1.浮动元素产生了浮动流,所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素(只有块级元素看不到浮动元素)
2.浮动主要会影响后面其他的非浮动元素的布局，所以父元素的浮动是必须清除的，子元素也最好清除一下，以免出现一些莫名其妙的现象。
我们可以这么来理解：浮动就像是原本在地面的一幢房子忽然漂浮在空中，这样地面上它原本占用的地皮就要被其他新建的房子占用了（这是未清除浮动的情况），如果这时候出一个硬性规定：这个房子的地皮仍然保留，其他房子不得占用，那么后面的其他房子就不需要挪位置了，所有房子的整体布局就不会发生改变（这就是清除浮动的情况）。

一：浮动模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
        <div class="content">7</div>
        <div class="content">8</div>
        <div class="content">9</div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrapper{
        width: 330px;
        height: 330px;
        border: 1px solid black;
    }
    .content{
        float: left;
        color:fuchsia;
        background-color: gray;
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    
</style>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   <div class="box"></div>
   <!-- 123 -->
   <!-- <img src="../]ZZZ_Q1)]XT$3TZ}[LYQWAQ.png" alt=""> -->
   <!-- <div class="demo"></div> -->
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
.box{
    float: left;
    width: 50px;
    height: 50px;
    background-color: pink;
    opacity: 0.5;
}
    .demo{
        /* 设置这个display产生了bfc,并且让div变成了文本类元素*/
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: gray;
    }
</style>

</html>

二:父级包住浮动流元素的解决方法(不建议使用这个方法,破坏了结构)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="wrapper"></div>
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    <!-- 父级是块级元素,看不到浮动元素,包不住浮动元素,要想包住但是又不想设置宽高
    我们可以清除浮动流 clear:both意思就是左右两边的都清除
    -->
    </div>
    <!-- p标签是块级元素 -->
    <p></p>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrapper{
        border: 1px solid black;
    }
    .content{
        color:red;
        float: left;
        background-color: gray;
        width: 100px;
        height: 100px;
    }
    p{
        border: 1px solid  black;
        /* clear:both意思就是左右两边的都清除 */
        clear: both;
    }
</style>

</html>

三:利用伪元素清除浮动

注意:能用clear清除浮动的必须是块级元素要想这个clear:both;生效，必须是块级元素，伪元素天生是行级元素所以要加display:block;来改变伪元素的行级元素结构
以后但凡是要写父元素包住子元素,而子元素又是浮动元素只能这么来写,伪元素不改变页面结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    
    
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrapper::after{
        content:"";
        clear:both;
        display: block;
    }
    .wrapper{
        border: 1px solid black;
    }
    .content{
        color:red;
        float: left;
        background-color: gray;
        width: 100px;
        height: 100px;
    }
   
</style>

</html>

四:产生bfc清除浮动流

浮动元素有浮动流，父级元素看不到它，只有BFC和文本类元素可以看到，所以把父级元素也变成浮动流元素
凡是设置了position:absolute;float:left/right;display:inline-block从内部把元素转换成inline-block行级块元素,内容决定大小,所以上面的方法中父级元素没有那么宽了，而是紧紧包裹住，(因为文本类元素的宽高由内容决定），产生bfc的方法中overflow:hidden不会把元素父级元素变为行级块元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    
    
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrapper{
        /* float: left; */
        /* display: inline-block; */
        /* position: absolute; */
        border: 2px solid red;
    }
    .content{
        color:red;
        float: left;
        background-color: gray;
        width: 100px;
        height: 100px;
    }
   
</style>

</html>

设置bfc会从内部转换成inline-block举例

span是行级元素,我们给它设置宽高

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <span>span</span>

</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    span {
        position: absolute;
        background-color: red;
        width: 100px;
        height: 100px;
    }
</style>

</html>

五:使用浮动元素后清除浮动流

使用完浮动元素后要清除浮动流,避免影响后面的结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   <ul class="nav">
       <li class="list-item">
           <a href="#">天猫</a>
       </li>
       <li class="list-item">
        <a href="#">聚划算</a>
    </li>
    <li class="list-item">
        <a href="#">天猫超市</a>
    </li>
   </ul>
   <span>11</span>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
  a{
      text-decoration:none;
  }
  .nav{
      list-style: none;
  }
  /* 清除浮动流 */
  .nav::after{
      content: "";
      /* 转换为块级元素,后面的元素不会在它后面 */
      display: block;
      clear: both;
  }
  .nav .list-item{
      float: left;
      margin: 0 10px;
      height: 30px;
      line-height:30px
  }
  .nav .list-item a{
      padding: 0,5px;
      color: #f40;
      font-weight: bold;
      height: 30px;
      display: inline-block;
      border-radius: 15px;
  }
  .nav .list-item a:hover{
      background-color: #f40;
      color: #fff;
  }
</style>

</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动模型以及清除浮动流的方法

文章目录一：浮动模型二:父级包住浮动流元素的解决方法(不建议使用这个方法,破坏了结构)三:一：浮动模型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
复制链接

扫一扫