이런 결과가 나오는 이유는 앞에서 설명했듯이 float 속성이 적용 대상의 원래 위치를 보장하지 않기 때문입니다. 이러한 특징은 다음과 같은 레이아웃을 만들 때 더 도드라집니다.
그림 6-64 만들려는 레이아웃
그림과 같은 레이아웃을 만들기 위해 다음 코드를 작성합니다.
06/05/float-ex1.html
<style>
.container{
width:400px;
padding:1rem;
margin:0 auto;
border:1px solid black;
background-color:#ccc;
}
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
}
.blue-box{
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box red-box"></div>
<div class="box blue-box"></div>
</div>
</body>