0

I've been studying float for a while because it is a pretty complicated (to me) property, but I can't find an explanation for the following behavior.

In this fiddle, I have two boxes on two different lines:

.container {
    width: 800px;
    height: 500px;
    border: 1px solid red;
}

.left {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    margin: 5px 0 0 5px;
}

.right {
    width: 200px;
    height: 200px;
    border: 1px solid purple;
    margin: 5px 0 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        </div>   
</body>
</html>

In the moment I use float: left on the .left div, the border of the second box disappears and I can't understand why.

.container {
    width: 800px;
    height: 500px;
    border: 1px solid red;
}

.left {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    margin: 5px 0 0 5px;
    float: left;
}

.right {
    width: 200px;
    height: 200px;
    border: 1px solid purple;
    margin: 5px 0 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        </div>   
</body>
</html>

Can anybody explain me what exactly happens? Why does the border of the second box disappear when using float on the other box?

Thanks.

Octavian Niculescu
  • 423
  • 4
  • 10

0 Answers0