HTML消除波动的在其中两种方法

1、消除波动的方法1

给前面1个父元素设定高宽比,​留意:公司开发设计中能不写高宽比就不写高宽比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>D131_ClearFloat</title>
    <style>
        .smallbox1{
            width:100px;
            height:100px;
            background-color: red;
            boder:3px solid black;
            margin:5px;
            float:right;
​
        }
        .smallbox2{
            width:100px;
            height:100px;
            background-color: red;
            boder:3px solid black;
            margin:5px;
​
        }
        .smallbox3{
            width:100px;
            height:100px;
            background-color: red;
            boder:3px solid black;
            margin:5px;
​
        }
        .smallbox4{
            width:100px;
            height:100px;
            background-color: red;
            boder:3px solid black;
            margin:5px;
​
        }
        .smallbox5{
            width:100px;
            height:100px;
            background-color: red;
            boder:3px solid black;
            margin:5px;
​
        }
        .smallbox6{
            width:100px;
            height:100px;
            background-color: red;
            boder:3px solid black;
            margin:5px;
​
        }
        .bigbox1,.bigbox2{
            /*width:400px;*/
            /*width:400px;*/
            background-color: green;
            border:3px black solid;
        }
</style>
</head>
<body>
<div class="bigbox1">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
    <div class="smallbox3"></div>
</div>
<div class="bigbox2">
    <div class="smallbox4"></div>
    <div class="smallbox5"></div>
    <div class="smallbox6"></div>
</div>
</body>
</html>

2、消除波动的第2种方法

给后边的特性加上clear特性

clear特性赋值:

none:默认设置赋值,依照波动元素的排列标准开展排列(左波动找左波动,右波动找右波动)

left:不必找前面的左波动元素

right:不必找前面的右波动元素

both:不必找前面的左波动和有波动元素

比如:大家不设定大盒子的宽高,小盒子会把大盒子撑起来,可是两个大盒子会因而而在1行上

 .smallbox1{
            width:100px;
            height: 100px;
            float:left;
            background-color: red;
            border:2px solid black;
        }
        .smallbox2{
            width:100px;
            height: 100px;
            float:left;
            background-color: red;
            border:2px solid black;
        }
        .smallbox3{
            width:100px;
            height: 100px;
            float:left;
            background-color:blue;
            border:2px solid black;
        }
        .smallbox4{
            width:100px;
            height: 100px;
            float:left;
            background-color: blue;
            border:2px solid black;
        }
    </style>
</head>
<body>
<div class="bigbox1">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
</div>
<div class="bigbox2">
    <div class="smallbox3"></div>
    <div class="smallbox4"></div>
</div>
</body>

大家应用clear特性在第3个小盒子上,这样便可以另起1行了(第4个就无需,由于大家就想让第3个挨着第4个),只必须第3个小盒子的编码改动编码

      .smallbox3{
            clear:left;
            width:100px;
            height: 100px;
            float:left;
            background-color:blue;
            border:2px solid black;
        }

​留意点:margin特性无效了,不无效的方法大家下一次再说。

3、源代码:

D131_ClearFloat.html

D132_CLearAttribute.html

详细地址:

https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html

https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html

总结

以上所述是网编给大伙儿详细介绍的HTML消除波动的在其中两种方法,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!