float

float 뜻

띄우다의 의미를 가지고 있음 둥둥~!
float정렬은 객체를 띄어서 정렬하는 속성을 갖는다.

	<style>
     .wrap {
        border: 4px solid palevioletred;
      }

      .content {
        /* float: left; */
        margin: 5px;
        height: 20px;
        border: 2px solid pink;
      }
    </style>


    <div class="wrap">
      <div class="content content2">내용1</div>
      <div class="content">내용2</div>
    </div>

블록 속성 태그는 위 그림과 같이 가로폭 전체의 넓이를 가지는 속성을 가지고 있다.
여기서 float:left를 주면!

문제점

이렇게된다!!

왜??

부모요소가 자식요소를 인식하지 못하기 때문에!(형제 요소 또한 인식못함!)

해결방법!

1. overflow:hidden or overflow:auto
   간단하게 해결가능 그러나! 자식요소의 크기가 커지면 짤리거나 스크롤이 생기니 추천 X

 .wrap {
        border: 4px solid palevioletred;
        overflow: auto;
      }

2. CSS의 ::after 가상요소로 해결 [clear-fix]
   부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법
   

 .wrap::after {
   content: "hello!";
   display: block;
   clear: both;
 }

• 가상요소는 기본적으로 인라인 속성이다
• 인라인 요소는 width, height 값을 설정하지 못한다.
• float을 사용하면 inline-block처럼 성질이 바뀐다.

*오늘의 새로움 : css작업 시 html 작성 후 모든 라인에 클래스를 먼저 작성하고 한줄씩 코딩 후 필요없는 클래스를 정리하기!