CSS 浮动(Float)-清除浮动（Clear）

一，什么是浮动
Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

二，元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
三，浮动（float）的属性
1.浮动的作用：

用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

2.float 属性可以设置以下值之一：

left 元素浮动到其容器的左侧
right 元素浮动在其容器的右侧
none 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值
3. float: right;

实例：

浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

<!DOCTYPE html>
<html>
 
<head>
    <style>
        img {
            float: right;
        }
    </style>
</head>
 
<body>
 
    <h1>向右浮动</h1>
 
    <p>大兴活是讨，疾韩。</p>
 
    <p><img src="../project001/神十四火箭.webp" alt="wupian" >
 
        子行谋上我而听，俭活大次大陛流好，何木你化马你，
        洋以牙书妙说后死快以个得俭都修感回，虽后严褒不，人纯人却言说杨者答张首为会鼓可友非生，
        同而一法是谓到叹入，弟病下中王六，是历重于，
        丰李狂未畴况无并的，之事秦乐力帮承不慧只是迷褒就领，韩力他，二就招中几啦，法。</p>
 
</body>
 
</html>

4.float: left;

实例：

浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

<!DOCTYPE html>
<html>
 
<head>
    <style>
        img {
            float: left;
        }
    </style>
</head>
 
<body>
 
    <h1>向左浮动</h1>
 
    <p>大兴活是讨，疾韩。</p>
 
    <p><img src="../project001/神十四火箭.webp" alt="wupian" >
 
        子行谋上我而听，俭活大次大陛流好，何木你化马你，
        洋以牙书妙说后死快以个得俭都修感回，虽后严褒不，人纯人却言说杨者答张首为会鼓可友非生，
        同而一法是谓到叹入，弟病下中王六，是历重于，
        丰李狂未畴况无并的，之事秦乐力帮承不慧只是迷褒就领，韩力他，二就招中几啦，法。</p>
 
</body>
 
</html>

5.相邻的浮动元素

把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
.box 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
 
</style>
</head>
 
<body>
<h3>图片</h3>
<p>即听使得过。</p>
<img class="box" src="../project001/神十四火箭.webp  "width="107" height="90">
<img class="box" src="../project001/神十四火箭.webp " width="107" height="80">
<img class="box" src="../project001/神十四火箭.webp " width="116" height="90">
<img class="box" src="../project001/神十四火箭.webp " width="120" height="90">
<img class="box" src="../project001/神十四火箭.webp  "width="107" height="90">
<img class="box" src="../project001/神十四火箭.webp " width="107" height="80">
<img class="box" src="../project001/神十四火箭.webp " width="116" height="90">
<img class="box" src="../project001/神十四火箭.webp " width="120" height="90">
</body>
</html>

四，清除浮动（clear）
1，clear 属性
①clear 属性可设置以下值：
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值
②在元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

使用 clear 属性往文本中添加图片廊：

实例

<!DOCTYPE html>
<html>
 
<head>
    <style>
        .div1 {
            float: left;
            width: 100px;
            height: 50px;
            margin: 10px;
            border: 3px solid #73AD21;
        }
 
        .div2 {
            border: 1px solid red;
        }
 
        .div3 {
            float: left;
            width: 100px;
            height: 50px;
            margin: 10px;
            border: 3px solid #73AD21;
        }
 
        .div4 {
            border: 1px solid red;
            clear: left;
        }
    </style>
</head>
 
<body>
 
    <h1>不使用 clear</h1>
    <div class="div1">div1</div>
    <div class="div2">div2 </div>
    <br><br>
    <!-- 在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。 -->
    <h1>使用 clear</h1>
    <div class="div3">div3</div>
    <div class="div4">div4 </div>
    <!-- - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。 -->
</body>
 
</html>

2. clearfix Hack
如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

<!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 {
            border: 3px solid #4CAF50;
            padding: 5px;
        }
 
        .img1 {
            float: right;
        }
 
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
 
        .img2 {
            float: right;
        }
    </style>
</head>
 
<body>
 
    <p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出</p>
 
    <div>
        <h1>Without Clearfix</h1>
        <img class="img1" src="../project001/神十四火箭.webp" alt="" width="180" height="167">
        李落相之二，力战在。
    </div>
 
    <p style="clear:right">请为包含元素添加 clearfix hack，以解决此问题：</p>
 
    <div class="clearfix">
        <h1>With Clearfix</h1>
        <img class="img2" src="../project001/神十四火箭.webp" alt="" width="180" height="167">
        自不他价，极兄法又。
    </div>
 
</body>
 
</html>