Closed as not planned
Description
Source Code
<!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;
}
div:nth-of-type(1) {
position: relative;
background-color: aquamarine;
}
div:nth-of-type(1) > div:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: pink;
}
div:nth-of-type(1) > div:nth-of-type(2) {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background-color: purple;
}
h1 {
background-color: greenyellow;
}
</style>
</head>
<body>
<h1>Hello</h1>
<div>
<div></div>
<div></div>
</div>
</body>
</html>Question
How can you experts achieve an effect similar to CSS floating layout and clearing floats using pure CSS methods under the premise of positioning layout?
Metadata
Metadata
Assignees
Labels
No labels