float 라는 단어는 "뜨다" 라는 의미 입니다.
원래 웹페이지에서 이미지를 어떻게 띄워서 택스트와 함깨 배치할 것인가에 대한 속성입니다.
이말은 즉슨 신문기사 같은 사이트에 많이 사용 한다는 예시 입니다.
<html>
<head>
<style>
.ex-layout{ height: 310px }
.menu{
width: 300px;
height: 40px;
border: 2px solid #09c;
background-color: #d7f5ff;
}
.main .left-menu{
float: left;
width: 50px;
height: 254px;
border: 2px solid red;
background-color: #ffe7d5;
}
.main .content{
float: left;
width: 250px;
height: 250px;
}
.main .content .article{
height: 200px;
border: 2px solid blue;
background-color: #e2e9ff;
}
.main .content .comment{
height: 50px;
border: 2px solid purple;
background-color: #ffddff;
}
</style>
</head>
<body>
<div class="ex-layout">
<div class="menu">global menu</div>
<div class="main">
<div class="left-menu">left menu</div>
<div class="content">
<div class="article">article</div>
<div class="comment">comment</div>
</div>
</div>
</div>
</body>
</html>
아래의 결과 입니다.
해당 결과 값이 이해가 되신다면 넘어 가시면 됩니다.
'CSS' 카테고리의 다른 글
| [CSS] display 속성 (0) | 2020.06.23 |
|---|---|
| [CSS] Position 속성 (0) | 2020.06.23 |
| [CSS] Grid (0) | 2020.05.16 |
댓글