<body>
<p>
<img src="img/pic07.jpg" alt="">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nostrum mollitia quam voluptas molestias. Quam qui deleniti saepe omnis nesciunt quaerat, nobis temporibus, ipsa aliquam molestiae id tenetur cupiditate velit!
<br>Minus quia at expedita iusto in eos nihil vel modi amet ratione praesentium, voluptatem corrupti! Doloribus quidem atque at tenetur, porro expedita velit totam? Temporibus deleniti debitis ex dignissimos at.
</p>
<div class="parent">
<div class="child ch1">λ΄μ©</div>
<div class="child ch2">λ΄μ©</div>
<!-- μμμ¬λΌμ§μ ν΄κ²°νκΈ° μν΄ μ¬μ©λ μμ (empty node, empty element)
κ·Έλ¦Όμ΄λ ν
μ€νΈ μ¬μ©μλ¨ ;
μ΄κ±° μ°λ©΄ float μΈ λ λΆλͺ¨μμμ μ€λ²νλ‘μ° μμ¨λ λ¨
κ·Έλ₯ μ’μ λ°©λ²μ μλ..-->
<div class="clear"></div>
</div>
<div class="uncle">
<!-- ::before -->
<div class="box">μν΄μ μμμμ</div>
<!-- ::after -->
</div>
</body>
<style>
p{
width: 500px;
background-color: #eee;
line-height: 20px;
}
p>img{
height: 200px;
float: left;
}
.parent{
background-color: #eee;
}
.parent>.child{
width: 200px; height: 200px;
float: left;
}
.parent>.ch1{background-color: #f90;}
.parent>.ch2{background-color: #f30;}
.parent>.clear{
/* νμ μ κ°μ΄ float 쀬μ λ both */
clear: both;
}
.uncle{
height: 200px;
background-color: #09f;
}
.uncle>.box{
background-color: #00f;
color: fff;
}
/* uncleμκ² κ°μμ μμμμλ§λ€κΈ° */
/* μ€μ νλ μμμμ μ΄μ μΌλ‘ κ°μμμμ λ§λλλ€. */
.uncle::before{
display: block;
content: 'boxμμ μ΄μ μΌλ‘ κ°μμμκ° λ§λ€μ΄μ‘μ΅λλ€';
}
/* μ€μ νλ μμμμ μ΄νμ κ°μμμμ λ§λλλ€. */
.uncle::after{
/* λΈλμμλ‘ μλνκ² λ©λλ€. */
display: block;
/* λ΄μ©μ΄ λ€μ΄κ°λ content_boxλ₯Ό λ§λ€μ΄ λ‘λλ€. */
content: '';
width: 200px;height: 40px;
background-color: #ccc;
margin: 0 auto;
}
</style>
μ΄μ μ΄μ μ΄μ π₯