problem description
two DIV,DIV1 floats to the left, but DIV2 does not float. The effect is that DIV2 floats to the position of DIV1 and is covered by DIV1, and the text of DIV2 is squeezed out
.what methods have you tried
clearing floats in DIV2 solves this problem, but I don"t quite understand why it"s not an element or a line, and why it overlaps.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
width: 100px;
height: 100px;
}
-sharpdiv1{
background-color:red;
float:left;
}
-sharpdiv2{
background-color:yellow;
/* clear: both; */
}
</style>
</head>
<body>
<div id="div1">
I AM DIV ONE
</div>
<div id="div2">
I AM DIV TWO
</div>
</body>
</html>what result do you expect?
I hope I can understand why this happened, thank you!