这是我参加「第四届青训营」笔记创作活动的第三天

浮动属性

2661658760796_.pic.jpg

     .A{
         float: left;
         }

浮动两大作用：1.定义网页中其他文本如何环绕该元素显示 2.让竖着的东西横着来

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .blue{
            background-color: blue;
        }
    </style>
  

</head>

<body>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="blue"></div>
    
</body>
</html>

此时浏览器

截屏2022-07-25 22.22.48.png

如果给red标签添加一个左浮动属性。则页面显示只有黄蓝盒子，但如果给所有标签加左浮动属性，则页面显示红黄蓝盒子并排在一行
添加右浮动，从右边数，红黄蓝
特殊浮动，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            width: 500px;
            height: 500px;
        }
        .red{
            background-color: red;
            float: left;
            width: 800px;
            height: 800px;
        }
        .yellow{
            background-color: yellow;float: left;
            width: 400px;
            height: 400px;
        }
        .blue{
            background-color: blue;float: left;
            width: 300px;
            height: 300px;
        }
    </style>
  

</head>

<body>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="blue"></div>
    
</body>
</html>

特殊浮动：见缝插针，有缝隙就钻。

截屏2022-07-26 10.22.41.png

4.文字浮动：如果在第二个绿色盒子中加上文字，将第一个红色盒子浮动（第二个绿色盒子大于第一个红色）文字不会因为盒子被挡，而影响自己，文字会被挤出，从而被显示

具体用图片表示

2681658801987_.pic.jpg

清浮动

清除浮动只是改变元素的排序方式，该元素还是漂浮着，不占据文档位置。属性：clear

none允许有浮动
right不允许右边有浮动对象
left不允许左边有浮动对象
both不允许有浮动对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1 ,.box2{
        width: 200px;height: 200px;
        float: left;
       } 
       .box1{
        background-color: yellow;
       }
       .box2{
        background-color: blue;
       }
       .box{
        width: 300px;
        height: 300px;
        background-color: red;
       }
    </style>
  

</head>

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

    </div>
    
    <div class="box"></div>
</body>
</html>

此时页面

截屏2022-07-26 09.09.24.png

清浮动方法： 1.写固定高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1 ,.box2{
        width: 200px;height: 200px;
        float: left;
       } 
       .box1{
        background-color: yellow;
       }
       .box2{
        background-color: blue;
       }
       .box{
        width: 300px;
        height: 300px;
        background-color: red;
       }
       .container{
        height: 200px;
       }
    </style>
  

</head>

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

2.清浮动clear是写在会顶上去的盒子（比如上图的红盒子）

<style>
       .box1 ,.box2{
        width: 200px;height: 200px;
        float: left;
       } 
       .box1{
        background-color: yellow;
       }
       .box2{
        background-color: blue;
       }
       .box{
        width: 300px;
        height: 300px;
        background-color: red;
        clear:left;
       }

    </style>

3.当前浮动元素后看补一个盒子（这个盒子不需要添加任何属性）

<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div style="clear:both;"></div>
    </div>
    
    <div class="box"></div>
</body>

4.overflow:hidden(频繁使用）写在会顶上的盒子上 overflow通过hidden引发了我们BFC（块级作用域）会让浮动元素计算高度从而不让盒子在浮动变成零。

浮动案例

截屏2022-07-26 09.44.42.png

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    * {
        margin: 0%;
        padding: 0%;
    }
    div{
        float: left;
    }
    div img {
        width: 187px;
        height: 125px;
    }
    div p {
        font-size: 12px;
        text-align: center;
        background-color: #f6f7f8;
        width: 187px;
    }


   </style>
</head>

<body>
    <div>
        <img src="//n.sinaimg.cn/news/transform/579/w340h239/20220719/bbb8-23bebe9cd09c0b8d3cc73c18cb7f16f9.jpg" data-src="//n.sinaimg.cn/news/transform/579/w340h239/20220719/bbb8-23bebe9cd09c0b8d3cc73c18cb7f16f9.jpg" width="198" height="132">
        <p>问天实验舱近日择机实施发射</p>
    </div>
    <div>
        <img src="//n.sinaimg.cn/news/transform/579/w340h239/20220719/bbb8-23bebe9cd09c0b8d3cc73c18cb7f16f9.jpg" data-src="//n.sinaimg.cn/news/transform/579/w340h239/20220719/bbb8-23bebe9cd09c0b8d3cc73c18cb7f16f9.jpg" width="198" height="132">
        <p>问天实验舱近日择机实施发射</p>
    </div>
    <div>
        <img src="//n.sinaimg.cn/news/transform/579/w340h239/20220719/bbb8-23bebe9cd09c0b8d3cc73c18cb7f16f9.jpg" data-src="//n.sinaimg.cn/news/transform/579/w340h239/20220719/bbb8-23bebe9cd09c0b8d3cc73c18cb7f16f9.jpg" width="198" height="132">
        <p>问天实验舱近日择机实施发射</p>
    </div>
    <div>
        <img src="//n.sinaimg.cn/news/transform/579/w340h239/20220719/bbb8-23bebe9cd09c0b8d3cc73c18cb7f16f9.jpg" data-src="//n.sinaimg.cn/news/transform/579/w340h239/20220719/bbb8-23bebe9cd09c0b8d3cc73c18cb7f16f9.jpg" width="198" height="132">
        <p>问天实验舱近日择机实施发射</p>
    </div>
</body>
</html>

如图

截屏2022-07-26 10.10.12.png

### 对于中间缝隙需要学到盒模型知识

浮动属性｜青训营笔记

浮动属性

清浮动

浮动案例