css 블록 height 지정 팁

 - 위의 그림에 수정 , 삭제 버튼은 같은 제목이나 content와 같은 폼 태그 내부에 있으면서도,

오른쪽 정렬을 위해 float : right 를 줬더니 form 태그 밖으로 벗어났다.

 

이런 경우는 absolute나 float 처럼 블록이 같은 z 축 위에서 뜨는 속성을 줄 경우, 해당 요소를 포함하는 div가 높이 값을 가지지 못하기 때문이다.

 

 - 보이는 것과 같이 detail-btn-box 내부에는 detail-btn-box-right 가 있고, 그 안에 수정, 삭제 버튼이 있다.

하지만, detail-btn-box-right 가 float 이기 때문에, detail-btn-box 는 높이값을 잃어버렸다.

 

이 때 다음과 같은 설정을 해줌으로서 이를 방지할 수 있다.

#detail-btn-box:after{
	clear:both;
}

 

 

이 css를 적용시키면

 - 다음과 같이 detail-btn-box 이 height value를 가지게 된다

 

** css의 :before 와 :after에 대한 추가적인 공부, 정리가 필요할 것 같다