[CSS] float과 부작용 해결

float과 부작용 해결 1

 

float의 기본값은 none

float -> 최대한 너비 다이어트를 해서 위로 올라갈 수 있으면 올라간다.(display: inline-block 과 비슷)

display: inline-block은 display:block 을 포기하는 것

display:block은 레고 블럭처럼 엘리먼트 사이의 공백 또는 엔터(뉴라인)이 무시됩니다.

가끔 우리는 뭔가를 한줄에 표시할 때 그것들 사이의 여백이 없기를 바랄 때가 있습니다.

 

display:inline-block; 을 써도 되나 공백이 없어야 할 때

 

<section>1</section>

<section>2</section>

<section>3</section>

<section>4</section>

 

section{

  background-color: pink;

  float: right;

}

 

오른쪽에 4-3-2-1 순으로 붙음.

 

 

float과 부작용 해결 2

 

div의 기본적인 width, height 속성값 -> auto(상황에 따라 자동적으로 정해진다(나에게 얼마만큼의 공간이 허락되었는지, 내가 가지고 있는 또 다른 CSS 속성)

 

 

div:nth-child(2){

  background-color: coral;

}

 

section{

  background-color: pink;

}

 

section > div{

  float: left;

}

 

 

height 값이 0이기 때문에 배경색을 지정해도 배경색이 나오지 않음.

 

section::after {

  content: "";

  display: block;

  clear: both;

}

 

를 추가해 주어야 함

 

어떤 부모의 자식들이 모드 float:left 또는 float:right 라면 그 부모는 자식들을 인식하지 못함.

즉 자식들이 없다고 생각하기 때문에 높이가 0이 됨.

그래서 밑의 엘리먼트들이 위로 침범해 이상한 디자인이 됨.

 

 

 

 

float의 부작용 3

 

 

<section>

  <div>안녕하세요.</div>

  <div>감사합니다.</div>

</section>

 

section > div::before{ >>> div의 내부에서 가장 처음

  content: "- ";

}

 

>>  <div>[before content가 들어가는 부분]안녕하세요.</div>

 

 

section > div::after{

  content: "** ";

}

 

>>  <div>안녕하세요.[after content가 들어가는 부분]</div>

 

 

<ul>

  <li>당근</li>

  <li>오이</li>

  <li>양파</li>

  <li>야옹이</li>

</ul>

 

*{

  list-style: none;

  padding: 0;

  margin: 0;

}

 

ul > li::before {

  content: "* ";

}

 

li가 아니라 li가 가지고 있는 after, before

콜론 두개가 들어가는 것은 before, after 밖에 없음

 

 

after, before의 기본 속성은 inline, 원래 속성의 영향 x

 

 

-주의사항

div::before {content:"";} 와 div::before{} 는 아예 다른 것

 

 

 

float과 부작용 해결 4

 

section::after {

  content: ""; << section의 자식 요소로 공백을 추가

  display: block;

  clear: both;

}

 

부모 엘리먼트가 뒤에 추가된 자식을 감싸기 위해 높이값을 책정,

clear: both; >> float 계의 enter

 

www.evernote.com/l/AleO2FyzjuFI9ZN670_5KBkkPoiqfVAf1-A/

float과 부작용 해결