[HTML, CSS] float layout

https://codepen.io/pen/    

이곳에서 간단하게 html, css를 만들어서 코드를 저장하고 다른 사람들에게 공유할 수 있다.

Create a New Pen

 

 

.left와 .right를 각각 왼쪽, 오른쪽에 배치할 때  →  float 사용

 

 

 

문제1)   footer가 float를 떠있다고 생각해서 자리를 밀고 올라와서 차지하는 문제가 발생한다. 

 

해결방법 : footer에 clear: left; 속성을 줘서 float left 속성을 인식했을 때 올라가지 않도록 해준다. clear: both;를 주면 상위 엘리먼트가 right 또는 left로 되어 있을때 모두 인식해서 올라가지 않도록 해준다.

 

 

 

문제2)  float 속성을 줬을 때 wrap의 background-color가 보이지 않는다.
자식이 float인 경우에는 자식으로 생각하지 않는다.

 

해결방법 : #wrap에 overflow:auto; 속성을 줘서 float를 자식으로 인식하게 한다.

 

 

 

 

 

전체 코드

 

 

 

 

참고 : boostcourse  https://www.boostcourse.org/web316/lecture/16678?isDesc=false

웹 프로그래밍(풀스택)