[CSS] Float

Float

자식이 부모로부터 떠오르다. 즉! margin을 없애다.

    <div class="container">
      <header class="main-header">
        <h1>📘 The Code Magazine</h1>

        <nav>
          <!-- <strong>This is the navigation</strong> -->
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="#">Flexbox</a>
          <a href="#">CSS Grid</a>
        </nav>
      </header>
      <!-- header에는 제목이 있어야 한다. -->

.main-header {
  background-color: #f2f4f3;
  /* padding: 20px;
  padding-left: 40px;
  padding-right: 40px; */
  padding: 20px 40px;
  margin-bottom: 60px;
  /*height: 80px;*/
}

/* SMALLER ELEMENTS */

h1 {
  color: #dc0073;
  font-size: 26px;
  text-transform: uppercase;
  font-style: italic;
}

아직 float 속성을 입력하기 전 화면이다. float 속성을 적용해보겠다.

 

THE CODE MAGAZINE 옆에 카테고리(blog, challengesm, flexbox, css grid)를 놓고 싶다. 그렇게 하려면 일단 h1에 float를 입력해야한다. 

 

h1 {
  float: left;
}

그리고 nav 요소에 float:right를 입력하면?

h1 {
  float: left;
}

nav {
  float: right;
}

카테고리(blog, challengesm, flexbox, css grid)가 THE CODE MAGAZINE으로 부터 오른쪽으로 띄어져있다. 또한 회색 배경의 높이가 반으로 줄어들었다. 즉 그 배경과 관련된 요소를 잃어버렸다. 아직까지 그 요소의 절반정도가 보일 수 있는 이유는 패딩이 있기 때문이다. 만일 패딩을 제거하면 그와 관련되 요소는 사라져 회색 배경은 없어진다. 

WHY? 그 이유는 하위 요소(h1, nav)가 floated되었기 때문이다. 그래서 제거된거처럼 페이지에 나타나지 않는다. 

 

이러한 현상을 collapsing element라고 부른다. collapsing element가 발생할 대 요소의 높이는 축소되었다고 한다. 

 

그렇다면! 이전과 같은 높이를 갖기위해서는 어떻게 해야할까?

float를 제거해야한다. 

---

float 제거 - 1번째 방법 

( ↓ 빈 div로 인해 HTML이 복잡해질 수 있어 별로 추천하지 않는 방법이다.) 

 <header class="main-header">
        <h1>📘 The Code Magazine</h1>

        <nav>
          <!-- <strong>This is the navigation</strong> -->
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="#">Flexbox</a>
          <a href="#">CSS Grid</a>
        </nav>

        <div class="clear"></div>
      </header>

<div class="clear"> </div>를 입력해 준다. 콘텐츠(텍스트)를 원치 않음으로 빈칸으로 해둔다. 저장을 해도 아무것도 바뀌지 않는다. 두 요소(h1, nav)는 float되었기 때문이다. 

h1 {
  float: left;
}

nav {
  float: right;
}

.clear {
  clear: both;
}

float요소의 왼쪽과 오른쪽을 지우고 싶음으로 clear: both를 입력하면 된다.  그러면 하단의 사진과 같이 페이지에 나온다. 

---

float 제거 - 2번째 방법 

2번째 방법은 트릭이다. clearfix hack 

clearfix hack은 CSS 커뮤니티에서 수년동안 널리 사용되었다. 그 이유는 빈 div가 발생하는 상황같은걸 피하기 위해서이다. 

 

일단 header에 clearfix를 입력한다. 

    <div class="container">
      <header class="main-header  clearfix">
        <h1>📘 The Code Magazine</h1>

        <nav>
          <!-- <strong>This is the navigation</strong> -->
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="#">Flexbox</a>
          <a href="#">CSS Grid</a>
        </nav>

        <!-- <div class="clear"></div> -->
      </header>

그리고 CSS에서 의사 요소를 사용한다.

.clearfix::after {
}

 

::after 의사 요소를 통해 컨테이너의 하위 요소로써 마지막이 될 새로운 요소를 만든다. 그리고 clear:both를 지운다.

.clearfix::after {
  clear: both;
}

 

::after 의사 요소에 대한 특수성이 있다. 콘텐츠 속성에 대해 무언가를 정의해야만 나타난다. 그래서 콘텐츠에는 무언가 있어야 한다. 

 

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

빈 텍스트와 같으면 충분하다. 그리고 

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

dispaly: block을 작성하면?

문제가 해결된다. 

---

.author {
  /* padding-left: 80px; */
  /* padding-top: 10px; */
  float: left;
  margin-left: 10px;
  margin-top: 20px;
}

 

          <img
            src="img/laura-jones.jpg"
            alt="She is laura-jones"
            height="50"
            width="50"
          />
          
          <p id="author">
            Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
          </p>

p문단은 블록 요소 였다. 요소 앞뒤에 줄 바꿈을 만들었다. 이 단락을 인라인, 인라인 블록 요소로 만들면 단락이 나란히 올 수 있게 할 수 있다. 

 

          <img src="img/laura-jones.jpg" alt="She is laura-jones" height="50"
          width="50"' class="author-img" />

          <p id="author" class="author">
            Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
          </p>

CSS에 스타일을 추가해보겠다.

/* floats */
.author-img {
  float: left;
}

float: left;를 적으면 어떤일이 일어날까?

이미지문서의 흐름에서 기본적으로 제거된다는 것이다. 절대적으로 배치된 요소와 같다.   floats와 차이점은 다른 모든 요소는 float 주변에 있을것이다. 

 

p와 그림 사이에 공간을 추가하겠다. 

.author {
  /* padding-left: 80px; */
  padding-top: 10px;
  float: left;
  margin-left: 20px;
}

 

---

보통 흐름(normal flow)

defalut positioning

요소는 in flow

요소는 HMTL 코드의 순서에 따라 간단히 배치 된다.

 

default positionig
position: relative

절대 위치(absolute positioning)

요소는 보통 흐름에서 제거된다. : out of flow

주변 요소에는 영향을 미치지 않으며 중첩(overlap) 될 수 있다.

위, 아래, 왼쪽 또는 오른쪽으로 상대적으로 배치된 컨테이너에 요소를 offset 할 수 있다.

position: aboslute

floats

absolute positioning처럼 실제 positioning 체계가 아니다. 요소가 흐름에서 벗어날 수 있다.  absolute positioning과 비교하여  floating element를 얻을 수 있다. 

요소가 float되었을 때 보통 흐름(normal flow)에서 제거된다.  ← 절대 위치(absoulte positioning)과 동일하다.

텍스트와 인라인 요소는 float된 요소를 둘러싼다. (즉, 절대 위치에서 주변 요소에는 "영향을 미치지 않으며 중첩(overlap) 될 수 있다. " 이 말과 반대된다.)

절대적으로 배치된 요소에서 float요소는 완전히 다르다. why? 영향을 미치지도 않고 영향을 받지도 않는다.

컨테이너는 요소를 높이에 맞게 조정하지 않는다.

float: left
float: right