<목차>
1. float 의 배경과 특징
2. float 의 문제점
오늘은 CSS에 있는 Float를 배우고 활용하였다.
1.float 의 속성과 특징
float의 속성과 특징은
넓이와 높이를 설정가능한 블록상태를 가지는 속성이며
life, right를 이용하여 영역의 좌우 영역에 표현이 가능합니다.
float 말그대로 띄다 라는 표현을 가지고 있는데
float 속성을 사용하면 해당 이미지와 같이 띄어진 형태를 띄어서 사용자에게 보여지게 된다.
해당이미지처럼 123에 float 속성을주고 4번 은 좀더 큰 박스를 만들고 결과값을 확인해보면 오른쪽 이미지처럼 1,2,3 번 박스 밑에 4번 박스가 위치 하는것을 알 수 있다.
또한 최소한의 너비와 높이 값을 유지하려고 하는 인라인형태와 달리 float를 사용하면 block 형태로 변환되어 표현되는 것을 확인할 수 있다.
2. float 의 문제점 과 clear
float는 오래전부터 쓰여오던 속성인데 현대에 와서는 잘 사용하지 않는 속성이기도 합니다.그이유는 과거라면
원하는 영역에 이미지를 넣기위해서 만 사용하기에 원하는 이미지 등을 float속성으로 띄우고 그밑의 속성은 옆으로 밀어버리는 상황이 나타나게 되는데 이는 예전에 신문이나 간단하고 몇가지 영역을 사용하지 않는 문서에만 쓰였으나 현대에 와서는 복잡해지고 더욱더 다양한 영역에 원하는 표현을 원하기에 변수가 많은 float 속성을 거의 사용하지 않게 되었습니다.
해당 이미지로 코딩을 해본다면 블록형태인 div , div이니 위에 float-item 이라는 글씨와 밑에 예시글이 보일것이다.
여기서 float:left 를 사용하여도 결과값이 같다고 생각할 수있는데
블록형태 + 블록형태 인데 text 의 글이 float-item 바로 옆에 위치한 것을 알 수있었습니다.
또 마진과 패딩을 사용시 잘 적용되지 않는것 처럼 보이는데 이는 마진과 패딩은 기본적으로 요소의 넓이와 높이가 있다고 판단되면 그 시작점을 기준으로 밀기 때문에 적용이 잘 안되는 느낌을 줍니다.
text 에 마진 20px을 줘서 중앙에서 미뤄냈으나. 마진의 시작지점이 float-item부터 시작하기에 잘 안밀린듯한 느낌을 줌.
이러한 혼선을 줄수있는 float의 속성떄문에
clear 이라는 이전에 사용한float 요소를 취소시키는 효과를 가진 속성이 나오게 되었습니다.
clear:none clear을 설정하지 않은 기본값
clear:right 이전에 적용한 float:right 속성을 취소시킴
cleat:left 이전에 적용한 float:left 속성을 취소시킴
cleat:both left,light 둘다 취소시킴
그러나 cleat의 속성값이 나왔어도 번거롭고 까다롭기에 현대에서는 많이 사용되지 않는다.