CSS 왕초보 탈출하기 05 - float 속성(2/3) block속성에 float을 ??

CSS 왕초보 탈출하기 05 - float 속성(2/3) block속성에 float을 ??

 

block 속성에 float을 주면 어떻게 될까? 

일단 다시 한번 block 속성에 대해서 정리를 하고 오는 것을 추천한다.

 

CSS 왕초보 탈출하기 02 - block 속성 (1/2)

 

 

다녀오셧나여?

 

width:100px; width:100px; block요소에 float속성을 적용하면

 

자기 너비만큼의 값을 가지게 되며(float적용 전과 동일)

한줄을 모두 차지 하는 특성이 사라진다.(float 적용해서 이렇게 됨)

 

 

float속성 적용 전의 li3개

 

 

 

float속성 적용 후의 모습. block속성의 특징 중 하나인 한줄을 모두 차지하는 특성이 사라졌다. 마치 인라인블록 요소의 정렬과 흡사해졌다.

 

 

어...그러면 600px짜리 화면에서

각각 너비가 250px인 li3개는 어떻게 표현될까??

width가 600인 ul안의 width가 250인 li에게 float을 적용한 모습. 2개의 li가 위치하게 되어서 남은 영역이 100px이 남았고 3번째li의 너비가 250이므로 개행되어, 아래줄에 위치하게 되었다.

 

3번째 li(노랑색)이 100px의 남은 여백에 자리할 수 없기 떄문에, 아래로 개행되어 떨어진 모습을 확인 할 수 있다.

 

그렇다면 600px의 ul에 li 3개가 꼭 맞도록, 200px로 지정하면 어떻게 될까?

 

 

600px의 ul안에 li에게 width값을 200적용시킨 모습. 

 

그렇다. 저렇게 깔끔하게 정렬도 가능한것이다.

 

float속성으로 레이아웃을 적용했는데, 깔끔하게 안떨어지고 아래로 개행되었다?? 

 

그렇다면 아,, 뭔가 1px이라도 어긋나서 그런가..?하고 문제해결을 위한 추론을 해볼 수 있다.

 

 

 

 

---

다음시간

 

float속성을 사용했는데, 아래에 있는 애들이 막 뚫고 올라와서 난리도 아니게 되었을떄.. 어떻게 해야할까??