CSS清晰波动clear:b⊙﹏⊙oth的案例编码

日期:2021-03-24 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

今日给大伙儿讲一下清晰波动,在讲明除波动前,必须掌握什么叫波动,这儿我也不让你大伙儿详尽详细介绍波动了。
波动也便是摆脱文本文档流,摆脱文本文档流了,那父级的宽高也不能褥子集撑开,因此大家就必须清晰波动,空话很少说,大家上编码。

<!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;
            margin: 0 auto;
            border: 8px solid black;
        }
        .box::after{
            content: "";
            clear: both;
            display: block;
        }
        .box .left{
            width: 50%;
            height: 300px;
            background-color: red;
            float: left;
        }
        .box .right{
            width: 50%;
            height: 300px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

从这儿大家能看到,自身用了波动,父级的宽高也不能褥子集撑开,那样得话合理布局便会与你想像的不一样。这儿有许多种处理方法。

第一种:

在父原素里加上一个div,给加上的div再加消除波动

 <div class="clear"></div>
   clear{
            clear: both;
        }

第二种:

大家能够给父级的div设定高宽比,那样还可以。

 .box{
            width: 1000px;
            height: 300px;
            margin: 0 auto;
            border: 8px solid black;
        }

第三种

大家能够给父级再加overflow:hidden;特性,那样还可以。

.box{
            overflow: hidden;
            width: 1000px;
            margin: 0 auto;
            border: 8px solid black;
        }

第四种

大家能够用position: absolute或display: inline-block能够消除波动。

.box{
            /* position: absolute; */
            display: inline-block;
            width: 1000px;
            margin: 0 auto;
            border: 8px solid black;
        }

实际上吧别的四种了解就行,第五种一定要用到,别的四种全是能够消除波动的,可是他会有来无须要的不便,就拿用第二种来讲,假如中后期该父级必须加上子原素时,大家也要改动父级的高宽比,那样会有来许多不便,第五种也是最好用的一种了。

第五种

用伪原素来消除波动。大家能够给父级加上伪原素。

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

到此这篇有关CSS清晰波动clear:both的案例编码的文章内容就详细介绍到这了,大量有关CSS clear both消除波动 內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:㊑CSS子原素挑选父原素的完成 返回下一篇:没有了