๐ HTML,CSS
HTML&CSS 19์ผ์ฐจ (์ ๋ฆฌx)
Genie_.
2024. 3. 23. 22:11
728x90
๋ฐ์ํ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
</head>
<style>
div {
padding: 20px;
}
#box1{
/* float๋ ์์ ์ด ๊ฐ์ง๋ ํฌ๊ธฐ๋งํผ ํด๋น ๋ฐฉํฅ์ผ๋ก ๋ถ์ด๋ ๊ฒ */
background-color: cadetblue;
float: left; /* ์ผ์ชฝ์ผ๋ก ํ๋กํ
*/
}
#box2{
background-color: cornflowerblue;
float: right;
}
#box3{
background-color: bisque;
float: right;
}
#box4{
background-color: darkseagreen;
float: right;
/* clear๋ฅผ ์ํ๋ฉด float์์์๊ฒ ๋ถ์ผ๋ฉด์ ๋จ๋ ๊ณต๊ฐ ์ฐจ์งํจ */
/* clear: both; */
}
span{
vertical-align: bottom;
clear: left; /* float: left ๋์ด์๋ ๊ฒ์ ํด์ ํด๋ผ */
}
</style>
<body>
<div id="box1">๋ฐ์ค1</div>
<div id="box2">๋ฐ์ค2</div>
<div id="box3">๋ฐ์ค3</div>
<div id="box4">๋ฐ์ค4</div>
<section>
<img src="cat.jpg" alt="">
<span>ํ์ด์ฉ</span>
</section>
</body>
</html>
728x90
๋ฐ์ํ