<a> 태그 후 float 스타일 사용시 겹침, div 요소 오른쪽 정렬

 

1. 나는 버튼을 만들고 있었다. 그리고 해당 버튼을 화면에서 오른쪽 끝으로 보내고 싶어졌다. 버튼에는 <a href="하여튼주소">를 넣을 생각이다

2. 버튼을 만들고 난 후 분리선을 이용하여 구분을 짓고 싶었다.

<a href="귀여운주소" style="float: right;" class="btn btn-sm btn-primary">Write a post</a>
<hr>

코드로 본다면 float:right -> 요소를 오른쪽으로 정렬을 해라 라는 코드를 분명히 사용을 했습니다.

class 는 따로 작업을 하여 <a> 자체가 버튼처럼 보이도록 커스터마이즈를 한 상태이고

<hr>로 깔끔하게 구분선을 그었는데

 

아니 그런데 이게 무슨 일인가ㅠㅜ <hr> 선이 버튼을 가로질러버렸네요..

여기서 당황하지 않고

<a> 의 style 에 margin-bottom : 20px 도 넣어보고

<a> 태그와 <hr> 태그 전에 <br> 을 넣어 줄바꿈도 추가를 해 보았지만 상황만 악화시킬 뿐이었습니다.

 

여기서 아주 간단한 것으로 모든것은 해결이 되었습니다

<hr styl="clear:both">

또 이 스타일 하나로 끝이 났네요.

 

clear:both 라는 스타일은 float와 함께 많이 쓰인다고 합니다.

여기서 같이 쓰는 이유는 먼저, float 스타일을 적용하면, 그 다음에 오는 요소들까지 영향을 주거나, float  가 적용된 영역 아래로 들어가게 됩니다. 그렇기 때문에! float 속성 그만 사용하고 싶거나 이 전으로 되돌리고 싶을 때 사용하는게 clear 이라고 합니다

 

이 clear에는 clear:both, right,  clear:left,  clear:none, 등 여러 가지가 있는데, 

저는 솔직히 이걸 다 외우기도 싫고, 귀찮아서 그냥 매번 clear:both를 쓰려 해요