[CSS] float 속성과 해제(가상요소를 만들어 배경 적용)

float
블록 요소를 인라인 요소로 바꿔 좌측이나 우측부터 차례로 나열하는 속성

 

float-left: 가장 왼쪽의 빈 공간부터 차례대로 나열

float-right: 가장 오른쪽의 빈 공간부터 차례대로 나열

 

clear
float의 흐름을 해제시키는 속성으로 원래 구성된 레이아웃에서 변경이 있을 때 사용

 

clear-left: float된 박스 중 왼쪽이 높이가 낮을 때 왼쪽부터 채워줌

clear-right: float된 박스 중 오른쪽이 높이가 낮을 때 오른쪽부터 채워줌

clear-both: 가장 많이 사용, 해당 속성을 받은 태그는 float과 상관없이 다음줄로 이동

 

<div class="contents">
   <div class="pink"></div>
   <div class="green"></div>
   <div class="blue"></div>
   <div class="yellow"></div>
</div>

body 태그 내부 작성, 박스들을 만들어줌

 

.contents {
    background-color: black;
    width: 500px;
    height: 500px;
}
.pink,
.green,
.blue,
.yellow {
    width: 100px;
    height: 100px;
}
.pink {
    background-color: thistle;
}
.green {
    background-color: yellowgreen;
}
.blue {
    background-color: royalblue;
}
.yellow {
    background-color: gold;
}

 

style 태그 내부 CSS 작성, 각 박스에 배경색과 크기를 지정

 

 

pink 클래스에 float:left를 적용하면

 

pink 클래스의 div 태그는 3차원에서 다른 div 태그들보다 붕 뜬, 부유상태가 되고 나머지 태그들은 위로 다시 정렬됨 

현재 위 그림에서는 안보이지만 pink 클래스 아래 green 클래스가 있음

 

위 그림처럼 작성하려면 각 클래스에 float: left를 작성해주고 blue 클래스에 clear:both를 추가로 작성하면서

float 속성을 작성한 클래스 내부에 clear 속성도 함께 작성될 수 있음

 

가상요소 after
content 속성과 짝지어, 요소에 장식용 콘텐츠 추가

 

float을 해제하려면 float의 다음요소에 clear 속성을 작성해줘야 하는데, float 다음 요소가 없을 경우,

이 경우에는 float 의 배경이 되는 태그 속성이 제대로 실행되지 않음

가상요소를 만들어 float을 해제해줘야 함

 

<div class="lylic">
      <h1>I'm The One</h1>
      <div class="first">
        <p>
          Yeah you're lookin' at the truth the money never lie no I'm the one
          yeah I'm the one Early mornin' in the dawn know you wanna ride now.
          That's right. I'm the one yeah. That's right. I'm the one yeah Yeah
          you're sick of all those other imitators Don't let the only real one
          intimidate you See you watching going out of time now
        </p>
      </div>
      <div class="second">
        <p>
          I'm the one that hit that same spot. Hit it. She the one that bring
          them rain drops rain drops. We go back remember criss-cross and
          hopscotch hopscotch? You the one that hold me down when the block's
          hot hot. I make your dreams come true when you wake up. Dream. And
          your look's just the same without no make up eh. Had to pull up on
          your mama see what you're made of. Mama. Ain't gotta worry 'bout 'em
          commas 'cause my cake up hey You can run inside my life from that fame
          bus 'Cause I promise when we step out you'll be famous yeah Modern day
          Bonnie and Clyde what they named us. Why? 'Cause when we pull up—prr
          prr—all angles
        </p>
      </div>
</div>

body 태그 내부 HTML 작성

lylic 클래스 내부에 first와 second 클래스가 있음

 

.lylic {
    width: 600px;
    background-color: #171e25;
    color: white;
    border: 5px solid #6e6567;
    text-align: center;
}
.first {
    background-color: #90919d;
    width: 250px;
    float: left;
    padding: 5px;
    text-align: justify;
}
.second {
    background-color: #68a4ae;
    width: 250px;
    float: right;
    padding: 5px;
    text-align: justify;
}

style 태그 내부 CSS 작성

각 클래스에 배경 색을 지정하고 fisrt 와 second에는 각각 float 속성을 left와 right 작성

 

실행하니 lylic 클래스의 배경이 first, second 클래스 영역까지 적용되지 않음

 

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

lylic 클래스에 after 속성을 작성하여 제일 마지막 자식으로 가상요소(의사요소)를 생성하여 clear를 통해 float을 해제하면 배경이 적용됨