关于float与clear

来源：5-1 清除浮动

浅梦sky

2020-11-28 18:44:34

1、html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <link rel="stylesheet" type="text/css" href="css/5-1清除浮动.css">
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
</div>
</body>
</html>

2、css代码如下：

#div1{
    background-color: lightpink;
}

#div2{
    background-color: yellow;
    float: left;
    width: 200px;
    height: 200px;
}

#div3{
    background-color: skyblue;
    float: left;
    width: 220px;
    height: 220px;
}

#div4{
    background-color: black;
    width: 210px;
    height: 210px;
    clear: left;
    float: left;
}

#div5{
    background-color: red;
    float: left;
    width: 260px;
    height: 260px;
}

#div6{
    background-color: blue;
    float: left;
    width: 280px;
    height: 280px;
}