2025-2-1-浮动

浮动

在我们遇到相应问题时就可以使用浮动来解决问题，浮动会对原有文档设置改变的影响

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .a1{
        width: 50px;
        height: 50px;
        background-color: red;
        float:left;
    }
    .a2{
        width: 100px;
        height: 100px;

        background-color: blue;
    }

    .i1{
        width: 100px;
        height: 100px;
    }
    .i2{
        width: 100px;
        height: 100px;
    }
    .i3{
        width: 100px;
        height: 100px;
        float:left;
    }
    .i4{
        width: 100px;
        height: 100px;
        float:left;
    }

    ul li{
        float: left;
        margin:0 10px;
    }



    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
        float:left;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        float:left;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: red;
        float:left;
    }
    .box{
        width:250px;
        height:250px;
        background-color: #00ffff;
    }
</style>
<body>
<!--脱离文档流出现折叠现象，只给a1 float：left属性出现a1上a2下-->
<div class="a1"></div>
<div class="a2"></div>
<!--图片给float属性，我们能够去除相邻之间的白框距离-->
<!--这是没有给float的两个照片-->
<img src="static/img.png" class="i1">
<img src="static/img.png" class="i2">

<!--这是给了float属性的照片-->
<img src="static/img.png" class="i3" >
<img src="static/img.png" class="i4">

<!--空间不足会到第二行去-->
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<!-- 都给float属性会横向排列-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

图片因为全给了float：left属性，所以左边的两个是加float属性的，右边的两个是没有加的，由此我们也可以发现使用浮动的副作用，会影响原有文档的设置

posted @ 2025-02-12 21:07  liu某人  阅读(12)  评论(0)    收藏  举报