개인적으로 레이아웃을 가장 어려워하는 나이다..
차라리 디자인이면 모르겠는데 하..레이아웃..
공부하면서도 다른것보다도 제일 많이 애먹었다.

오늘도 열심히 화이팅해보자..!!!

folat?

'뜨디,'흐르다' 이런 사전적 의미를 가지고 있다.

float 속성을 갖는 요소는 html 문서에서 공간은 차지하되 다른 요소의 배치 영향을 안주는 요소가 된다.

folat속성이 없을때의 상태이다.
마진을 o으로 두고 테두리를 주었다.

앞에 요소가 float속성을 가질때,
id가 a인 요소에 float:left 속성을 주었다.

중요한 부분이다!

float:left 속성을 주는 것은 이렇게 명령하는 것과 같다.

hello라는 내용(content)만큼만 공간을 차지하고 다른 요소에 대해서 상대적으로 왼쪽(left)으로 배치되고 붕~ 떠있어라(무시되어라!) 다시말해 다른 요소들이 float속성을 지닌 태그요소의 존재를 무시하는 것이다.

-> 그러면 다음에 배치될 id가 b인 태그가 hello만큼의 공간을 제외하고 바로 옆으로 배치된다.원래 div태그는 display속성이 block이므로 한 줄을 혼자 차지하는 것이 정상.하지만 위 두 요소는 나란히 배치되었다! 위 코드에서 앞에 요소가 float 속성을 가짐과 동시에 붕 떠버려서(무시되어) block 속성값을 가진 다음 요소가 앞에 요소를 무시한채 나란히 배치될 수 있는 것.(물론 이미 차지하고 있는 공간은 제외)

두 요소가 모두 float속성을 가질 때,
내용(content)만큼의 공간만 차지한 채로 나란히 배치된다. div태그인데말이다! 지금 살펴본 성질을 이용해서 block속성을 가진 요소의 옆에 다른 요소들을 배치할 수 있다.

그림옆에 다른 요소 배치하기.
이미지 옆에 글씨가 배치되는 경우를 본 적이 있을 것이다. 이미지를 삽입하기 위한 img태그는 display:inline; 이 기본 속성이므로 다른 inline 속성을 가진 요소들과 한줄에 나란히 배치됩니다. 문제는 이미지와 글씨를 같이 배치해도 한 줄 이상 배치할 수 없다는 것이다.

이 문제를 해결하려면 img 태그요소에 float 속성을 주면 된다.

img 태그에 float속성을 주었으므로 이미지 만큼의 공간을 차지하되 붕~ 떠있게 된다.(다른 요소들에 의해 무시됨) 따라서 문자열들이 이미지 공간만 제외한 채로 상대적으로 오른쪽에 배치되며 이미지의 존재가 무시된 채로 배치된다. (원래는 이전 그림처럼 한 줄 안에 이미지와 문자열이 나란히 배치되어야 함)

clear 속성

float는 left나 right 속성값을 가질 수 있는데 왼쪽 또는 오른쪽에 배치된다. 이 속성은 상대적인 속성으로 다음과 같이 동작한다.

left 속성값을 가지는 요소의 다음에 오는 요소들은 상대적으로 오른쪽으로 배치되고 right 속성값을 갖는 요소의 다음에 오는 요소들은 상대적으로 왼쪽에 배치된다.

참고

img 태그에 float:right 속성을 주고 div 태그로 다시 감쌌는데도 역시 계속해서 무시된다.원래 p태그는 block 속성이므로 div태그와 한 줄에 배치되지 않는게 정상. 이 부분도 알아두기!

이때 만약 p태그가 원래처럼 동작하도록 하려면 clear 속성을 주면 된다.

clear:right; 속성을 가진 요소는 float:right; 속성의 영향을 받지 않는다. 따라서 위와 같은 결과가 나온다.

clear:left를 설정하면 float:left 속성의 영향을 받지 않고 clear:both; 라고 하면 모든 float 속성의 영향을 받지 않는다.

따라서 보통은 clear:right나 clear:left대신에 clear:both를 사용한다.

float속성은 아쉽게도 center 라는 속성이 없다.