css float, float 해제

float : 물에 떠있다. 

* 요소를 좌우배치 할떄 display:flex가 원칙 
 단 익스 하위에선 적용이 안되므로 float를 사용

 그래서 데스크탑은 float 주로사용 / 모바일 반응형은 flex를 주로 사용

float

float 해제 clearfix

- 부모(물)의 표면에 띄우는 속성 - 좌우배치가 목적이 아닌    이미지를 문단옆에 배치할때도 사용  - 부모자식중 누구라도 float 사용시 마진병합없음   (떠있기때문) - float 설정시 크기가 내용만큼 줄음 - display:block 요소로 변경됨 - 부모안의 모든 요소가 float 이면, 부모의 높이 0, 사라짐 - 앞쪽 요소가 모두 float 이면 아닌 요소에 마진병합 발생 - float 사용시 margin:0 auto 안먹힘 - :left  요소기준점 왼쪽 - :right 요소기준점 오른쪽    (기준이 오른쪽으로 변경되므로 margin-right 사용할 것) - center 없음

1. 헤더구조 : 부모에 height 높이 지정       (단 본문이 텍스트 아래로 내려오는 내용이나,         높이를 고정으로 주는 컨텐츠는 바람직하지않다.) 2. 섹션구조 : 부모에 overfloew: hidden       으로 float 요소 높이를 자동으로 지정       (단 hidden 사용시 넘치는 요소 잘림) 3.가상요소 after 사용    clearfix:after {    content:'';    display:block;    clear:both;    }       (섹션구조에서 그림자가 있을경우 .clearfix 공통클래스 사용)    한 부모안에서  float 과 float 아닌 요소가 섞여있을 경우     clear 속성사용 한부모안에서 float 아닌요소를 float 요소 아래를 내릴떄 clear:both

 

증말 무슨소린지 1도 모르겠쥬?

float 은 즉 수직으로 나열된 컨텐츠들을 좌우 옆으로 붙이고 싶을때 사용한다.

 

 

float 적용

 

여기 ul 박스안에 li 박스들이 생성되면 수직으로 나타난다.

 

 

#container  ul {

    margin: 50px;

    border: 30px solid green;

    background: green;

}

 

 

 

 

좌우 정렬을 해주기 위해서 li 에  fliat 설정한다.

#container  ul li {

    border: 1px solid black;

    background: yellow;

    font-size: 20px;

    padding: 20px;

    width: calc(100% / 3 );

    float: left;

}

 

이렇게 됬을때 부모영역 박스가 줄어들어 깨진걸 볼수있다. 이때   float 해제를 하는것!

 

float 해제

 

방법1 . 부모에 height 높이 지정

 

 

#container  ul {

    margin: 50px;

    border: 30px solid green;

    background: green;

    height: 150px;

}

 

 float된 요소들의 부모 태그 높이를 조절하면 float 해제가 되나,

높이가 바뀔때마다 수정 되어야 하며 반응형 대응이 불가.

 

 

 

방법2. 부모에 overfloew: hidden

#container  ul {

    margin: 50px;

    border: 30px solid green;

    background: green;

    overflow: hidden;

}

 float된 요소들의 부모 태그에 overflow:hidden 적용

부모에 자식컨텐츠 만큼 높이가 자동으로 지정된다. 단 넘치는 요소들은 잘린다.

 

 

 

방법3. 가상요소 after 사용

#container  ul:after {

    content: '';

    display: block;

    clear: both;

}

 float된 요소들의 부모 태그에 가상요소 after 적용 

가장 많이 쓰이며 부모태그가 inline-block 요소로 바뀌지 않음./ 높이가 정확히 잡힘 / 불필요한 요소 추가되지 않음.

 

뜻은 ul 태그 뒤에 after로 꾸며준다. 

content: ''; 내용이빈 display: blck; 블럭(박스)를 만들고 clear: both; 로 float lefr,right를 초기화 시키겠다는 뜻이다.

 

 

방법4. clearfix 사용

 

html 태그에 클래스로 지정해준다음 css에 속성을 부여한다.

 

#container .clearfix:after{

    content: '';

    display: block;

    clear: both;

}

 

 

 

 

근데 css 로 clearfix를 지정해 줘야 되는걸로 알고있는데..

예제에선 왜 html class 만 넣어도먹히는지 ㅠㅠ....

쌤한테 물어봐야겠다..