float 속성을 이용하여 header-menu 위치 조정

문제

float 관련 문제

---

header의 각 메뉴를 양쪽으로 띄어놓기 위해서 float 속성을 사용하였더니, 그 다음 오는 요소가 순차적으로 쌓이는 것이 아니라 현재 header가 위치하고 있는 영역에 중첩되어 랜더링되는 문제가 발생하였다.

 

문제해결_float 속성과 clearfix

결과적으로 float 속성에 대해서 얕게 알고 사용하여 발생한 실수였다.

 

float

• element에 부유 속성을 주어 배치할 수 있는 방법
• float으로 컨텐츠를 띄울 시 다음 내용은 빈 자리를 채우기 위해 포지션닝_브라우저 상의 오류

즉, 현재 문제가 발생한 화면 상에서 float-left와 float-right 속성을 준 두 개의 menu-container를 감싸고 있는 부모 태그인 inner 클래스 태그에 float값을 해제해 주는 추가 과정이 생략되었기 떄문에 이와 같은 일이 발생한 것이다.

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

다음과 같이 css 상에 가상선택자 after를 사용하여 inner 클래스 태그 바로 밑에 임의의 block 요소를 포지션닝한 뒤에 float 속성을 해제하였다.

(float 속성은 프로젝트 전반적으로 쓰일 것이기 때문에 따로 clearfix 라는 css 선택자를 만들어 주었다)

 

 <header class="section">
            <div class="inner clearfix">
                <div class="menu-group float--left">
                    <div class="logo">
                        <a href="#">GitHub</a>
                    </div>
                    <ul class="main-menu toggle">
                        <li><a href="#">Personal</a></li>
                        <li><a href="#">Open source</a></li>
                        <li><a href="#">Business</a></li>
                        <li><a href="#">Explore</a></li>
                    </ul>
                </div>
                <div class="sign-group float--right toggle">
                    <div class="btn-group">
                        <a href="#" class="btn sign-in">Sign in</a>
                        <a href="#" class="btn btn--primary sign-up">Sign up</a>
                    </div>
                    <form id="search-form" method="POST">
                        <input type="text" id="search" class="input--text" placeholder="Search Github">
                        <input type="submit" value="Submit">
                    </form>
                    
                    (...)
                    
                    </header>

이후에 html 상에서 float 속성을 가진 요소들을 감싸는 inner 클래스 태그에 clearfix 클래스명을 추가함으로써 문제를 해결하였다.