html
<!DOCTYPE html>
<html lang="en">
<!-- TODO
1. Make both paragraph elements wrap around the image.
2. Use Float to move the cat div to the left and the dog div to the right.
3. Use clear to make the footer go below both the cat and dog div. -->
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
div {
display: inline-block;
width: 40%;
}
p {
font-size: 2em;
}
img {
float: left;
}
.cat {
background-color: aquamarine;
float: left;
}
.dog {
background-color: coral;
float: right;
}
footer {
text-align: center;
background-color: blueviolet;
clear: both;
}
</style>
</head>
<body>
<div class="cat">
<h2>CatCSS</h2>
<img src="cat.jpeg" alt="cat in a box" />
<p class="first-paragraph">Nap all day cat dog hate mouse eat string barf pillow no baths hate everything but kitty
poochy. Sleep on keyboard
toy
mouse squeak roll over. Mesmerizing birds. Poop on grasses licks paws destroy couch intently sniff hand. The dog
smells
bad gnaw.</p>
</div>
<div class="dog">
<h2>DogCSS</h2>
<img src="dog.jpeg" alt="dogs in a box" />
<p class="second-paragraph">Heckin good boys and girls long woofer big ol wow very biscit long woofer heck what a
nice
floof, long doggo noodle
horse vvv very taste wow. Very taste wow many pats aqua doggo he made many woofs pupperino, puggo doing me a
frighten.</p>
</div>
<footer>Copyright. This is the footer</footer>
</body>
</html>Result
float
float:none;: 그대로 이미지 밑에 내용이 위치
float:left;: 이미지 왼쪽에 위치하며 글을 감싼다.
float:right;: 이미지 오른쪽에 위치하며 글을 감싼다.
https://developer.mozilla.org/ko/docs/Web/CSS/float
clear
clear:none;
clear:left;
clear:right;
clear:both;
footer {
text-align: center;
background-color: blueviolet;
clear: both;
}<footer>Copyright. This is the footer</footer>