浮动（float）

为什么需要浮动

最初浮动是为了像word有文字环绕，图片嵌入的功能出现的
让多个块级元素水平排列成一行
实现两个块级盒子的左对齐和右对齐

浮动的本质

浮动的包裹性

抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。 display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果

但是 float和display:inline-block 无法完全等同

原因：
- float可以自定义方向（从左往右或从右往左） inline-block只有从左到右一个水平排列的方向
- float会使周围文字环绕元素 inline-block不会
浮动的破坏性

flex破坏性指的是，父元素高度塌陷。

把一张图片放在div里显示：

<div class="outer">
    <img src="./images/2.jpg" width="150px" height="100px">x
</div>

.outer{
    width: 400px;
    background-color: lightblue;
}

这时候如果给图片加上float:left ,父元素蓝色框就只有x占据的宽度

.outer{
    width: 400px;
    background-color: lightblue;
    float:left;
}

这时候如果把x去掉那么父元素（蓝色框）就直接没了

float 使用

float:left  左浮动

float:right  右浮动

float:left 实现块级元素水平排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .box{
            width: 1000px;
            height: 300px;
            background: gold;
            margin: 20px;
        }
        .box1{
            /* width:60px;
            height: 60px; */
            background: red;
            /* background: rgba(255, 0, 0, 0.363); */
            /* float: left; */
            

        }
        .box2{
            width: 120px;
            height:80px;
            background: gray;
            border: 1px solid pink;
            /* float:right */
            float: left;
        }
        .a{
            /* width: 70px;
            height: 70px;
            border: 1px solid blue;
            background: pink; */
            clear: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">asaaaa</div>
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
        
     
    </div>
</body>
</html>

清除浮动

clear:left(清除左浮动)/right(清除右浮动)/both(清除左浮动+右浮动)

哪边不允许有浮动元素，clear就是对应方向的值，两边都不允许就是both

方案1：给需要清浮动的元素加clear属性

  .box4{
            width: 120px;
            height:80px;
            background: blue;
            border: 1px solid pink;
            clear: left;
        }

方案2：

html:

<div class="box">
        <div class="box1">asaaaa</div>
        <div class="box2"></div>
        
        <div class="box2">4</div>
        <div class="box2">5</div>
        <!-- <div class="box2" style="height: 180px;">6</div> -->
        <div class="blank"></div>
        <div class="box4"></div>
    </div>

css:

 .blank{
            clear: left;
        }

方案3：使用伪元素清除浮动

css:

.boxes:after {
            content: '.';
            height: 0;
            display: block;
            clear: both;
        }

html:

<div class="box">
        <div class="boxes clearfix">
            <div class="box1">asaaaa</div>
            <div class="box2"></div>

            <div class="box2">4</div>
            <div class="box2 blankdiv">5</div>
            <!-- <div class="box2" style="height: 180px;">6</div> -->
            <div class="blank"></div>
        </div>
        <div class="box4"></div>

    </div>

方案4：overflow 清除浮动

html：

<div class="box">
        <div class="boxes clearfix">
            <div class="box1">asaaaa</div>
            <div class="box2"></div>

            <div class="box2">4</div>
            <div class="box2 blankdiv">5</div>
            <!-- <div class="box2" style="height: 180px;">6</div> -->
            <div class="blank"></div>
        </div>
        <div class="box4"></div>

    </div>

css:

   .boxes{
            overflow: auto;
        }

5.1 KiB Raw Blame History Unescape Escape

浮动（float）

为什么需要浮动

浮动的本质

float 使用

清除浮动

5.1 KiB

Raw Blame History