728x90
float요소 ?
- float 라는 단어는 원래 ‘뜨다’ 라는 의미이며
웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다 - 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나
요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것입니다. - block 요소는 세로로 나열되지만 float요소를 이용하여 가로로 배치 가능 !
하단 두 코드는 적용 &미적용 한것입니다
See the Pen Untitled by getgrovy (@getgrovy) on CodePen.
See the Pen non float: left by getgrovy (@getgrovy) on CodePen.
float요소들
- left : 요소를 왼쪽 방향으로 부유하게 설정
- right : 요소를 오른쪽 방향으로 부유하게 설정
- none : 기본값(default), 요소를 띄우지 않는다.
float를 쓰면 생기는 문제점 !
- 플로팅한 요소는 문서의 흐름을 벗어나기때문에 레이아웃을 무너뜨리게 되는 현상이 나타남
- 이런 문제를 해결하기 위해서는 float 을 해제해 주어야해
- 여기서 해제한다는 의미는 float을 해제하지않고 문제생긴 부분에 float의 영향을 받지 않도록 하는거야
문제점 해결방법 1 2 3 4 5 !
1. clear 속성부여
clear 속성을 부여하여 float효과를 해제
- left : 왼쪽에 floating 된 요소를 지정 해제
- right : 오른쪽에 floating 된 요소를 지정 해제
- both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
- none : 기본값(default), floating 을 해제하지 않음
2. 부모 요소에 float 적용
.parent { float: left; }- 플롯된 요소가 자식 요소일 경우에 부모요소는
자식 요소(문서 흐름에서 벗어남)를 감싸지 못하는 특징으로 인해 레이아웃이 무너진 형태처럼 보여 - 위처럼 부모에 float요소를 줄경우는 자식 요소의 높이를 인지하게 되지만
부모 요소도 float 된 요소가 되어 인라인 블럭의 특징을 가지고 되기 때문에 아웃에 따라 사용해야해
3. 부모요소에 display:inline-block 적용
.parent { display: inline-block; }- - 부모 요소는 자식 요소의 높이를 인지하게 되지만 되지만
부모 요소에 정의된 인라인블럭 속성 특성 때문에 본인 영역만큼만 너비를 가져 - float은 클리어되지만 부모태그가 inline-block이 되면서 의도하지 않은 레이아웃이 나타날수있어
4. 부모요소에 overflow:hidden 적용
.parent { overflow: hidden; }- overflow: auto;를 적용해도 되지만
자식 요소 너비가 부모 요소 너비보다 클 경우에 스크롤이 생기기 때문에 권장되지 않아! - overflow 특징대로 넘치는 것을 숨겨주는 속성이야
- 자식, 자손 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우에
overflow: hidden 값으로 인해 보여주고자 하는 요소가 안보이기때문에 잘써야해
5. micro clearfix hack
.clearfix:before, .clearfix:after {
display: block;
content: '';
line-height: 0;
}
.clearfix:after {
clear:both;
}- CSS 연구전문가인 니콜라스 갤러거가 고안한 방법(micro clearfix hack)이야 !
- 가장 최신에 나온 방법이며 css에 만들어 놓고 요소들에게
clearfix 라는 class만 주면 되어서 가장 간편하고 오류가 적은 방법이야
난 앞으로 이 방법으로만 레이아웃을 만들지 않을까 싶어 안뇽!