浮动与定位：CSS布局的艺术-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61662856/article/details/121799859

浮动

应用场景

1.文字环绕
2.横向排列

浮动的基本特点

修改float属性值

·left：左浮动，元素从左上排序
·right：右浮动，元素从右上排序

需要注意：
1.设置了float属性后元素就为块盒
2.浮动元素的包含块也是父元素的内容盒

盒子尺寸

1.宽度为auto时，表示适应内容宽度
2.高度为auto时，表示适应内容高度
3.margin为auto时，表示0
4.除高度外其它设置可以按百分比

盒子排列

1.左浮动的盒子靠左依次排列
2.右浮动的盒子靠右依次排列
3.浮动盒子在包含块中排列时会避开常规流盒子
4.常规流块盒在排列时无视浮动盒子
5.行盒在排列时会避开浮动盒子

·如果文字没有在行盒中，浏览器会自动生成一个行盒来包裹文字，该行盒叫做匿名行盒

高度坍塌

-浮动盒子跑到包含块外面

-形成原因：常规流盒子无视浮动盒子

-解决方式：
清除浮动、涉及CSS属性：class

·默认值：none
·left：清除左浮动，该元素出现在左浮动元素的下方
·both：清除浮动，该元素出现在浮动元素的下方

<style>
        .in{
            width: 300px;
            background-color: yellow;
        }
        .in .haha{
            height: 70px;
            float: left;
            background-color: royalblue;
            border-style: 100px dashed #000;
            color: white;
            margin: 20px;

        }
        .after{
            clear: both;

        }
    </style>
</head>
<body>
    <div class="in">
        <div class="haha">5</div>
        <div class="haha">4</div>
        <div class="haha">2</div>
        <div class="haha">5</div>
        <div class="haha">8</div>
        <div class="haha">9</div>  
        <div class="after"></div>  
    </div>   

</body>

<style>
        .in{
            width: 300px;
            background-color: yellow;
        }
        .in .haha{
            height: 70px;
            float: left;
            background-color: royalblue;
            border-style: 100px dashed #000;
            color: white;
            margin: 20px;

        }
        .in::after{
            content:"";
            display:block;
            clear: both;

        }
    </style>
</head>
<body>
    <div class="in">
        <div class="haha">5</div>
        <div class="haha">4</div>
        <div class="haha">2</div>
        <div class="haha">5</div>
        <div class="haha">8</div>
        <div class="haha">9</div>  
        <div class="after"></div>  
    </div>   

</body>