[css] float, clear

(상황) 화면을 2분할로 4개의 사각형을 만드는 과정

원하는  느낌은 이렇게 직사각형으로 2분할로 4 개의 사각형이 존재하는 모습이었다.

 

문제 1. <section> 의 길이가 설정보다 계속 길게 설정됨.

<section>
	<div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

 

처음 만든 html 과 css 이다.

.reserve-form { position: absolute; top: 25%; left: 0; width: -100% height: 50%;}

.reserve-form div {
	border: 1px solid darkgray;
    border-radius: 13px;
    padding: 10px;
    margin: 15px;
    width: 40%;
    position: absolute; top: 0; left: 0; right: 50%; bottom: 50%;
}

div.reserve-info {top:50%; left:0; right:50%; bottom:0; }

div.amount{top:0; left:43%; right:0; bottom:50%; }

div.agree {top:50%; left:43%; right:0; bottom:0; }

 

문제 2. 동시에 height 가 안에 내용에 맞게 조절 되지 않았다.

안에 내용이 들어가야 하기 때문에 height가 조절이 가능해야 했다.
조절은 가능했지만, 자주 선끼리 겹치는 상황이 생겼다.

 

해결. float 와 clear를 같이 사용

<div class="ticket">
	<span>예약 상품 정보</span>
</div>
<div class="amount">
	<span>최종 결제 금액</span>
</div>
<div class="reserve-info">
	<span>예약자 정보</span>
</div>
<div class="agree">
	<span>개인 정보 동의</span>
</div>

div.ticket{ float:left;width:50%; height:50% }

div.reserve-info { clear: left; float: left; width:50%; height:50% }

div.amount { float:right; width:50%; height:50% }

div.agree{ clear: right; float: right; width:50%; height:50% }

 

float 에 대한 mozila 설명

float : 해당 요소를 다음 요소 위에 떠있게 하는 것을 가리킨다.
속성으로는 none, left, right, inline-start, inline-end 존재한다.

 

clear 에 대한 mozila 설명

clear : float 속성이 적용된 요소 다음에 위치하는 요소들이 float 속성이 적용된 요소와 겹치는 현상을 방지하기 위해 사용한다.

css 요소	의미
none	none요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 않음을 나타내는 키워드
left	left요소가 지난 left 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드
right	right요소가 지난 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드
both	both요소가 지난 both left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드
inline-start	inline-start요소가 포함 블록의 시작 쪽 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드
inline-end	inline-end요소가 포함 블록의 끝 쪽 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드