Jam's story

float 유동배치 본문

2021-2학기/html+css+javascript

float 유동배치

애플쩀 2021. 10. 17. 08:34

float: right 나 left로 설정할 수 있다. 

왼쪽이나 오른쪽에 배치되도록 하는것이다. 

 

우선  이러한 html 이 있다. 

.float-unit {
width: 50px;
background: #707070;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 15px 0;
}

이렇게 세로로 나온다 

 

여기에 float : left를 추가해보자 

이렇게 나온다 

 

clear: both 를 추가해준다 

 

부모 요소(div.floatframe)가 해당 요소(div.float-unit)를 인식하지 못하고,

오로지 float되지 않은 요소들만 인식하여 포함 

내부에 배치하기 위해서는 float 속성 해제 필요

<!DOCTYPE html>
<html>
<head>
<title>overflow 프로퍼티</title>
<style>
.float-frame {
background : #E0E0E0;
border: 1px solid #D0D0D0;
padding: 10px;
}
.float-unit {
width: 50px;
background: #707070;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 15px 0;
float: left;

}
.clear {
clear: both; /* float 속성 해제 */
}
</style>
</head>
<body>
<div class="float-frame">
<div class="float-unit">A</div>
<div class="float-unit">B</div>
<div class="float-unit">C</div>
<div class="float-unit">D</div>
<div class="clear"> </div> <!-- float 속성 해제 -->
</div>
</body>
</html>

 

 

'2021-2학기 > html+css+javascript' 카테고리의 다른 글

position 배치  (0) 2021.10.19
디자인 color 배색 사이트  (0) 2021.10.18
웹페이지 간단하게 만들어보기  (0) 2021.10.17
중간고사 준비2  (0) 2021.10.16
html+css로 똑같이구현해보기  (0) 2021.10.15
Comments