float을 해제하는 방법
방법 |
풀이 |
1 |
float된 박스들의 바로 다음 박스에 clear:both;한다 - 바로 다음에 박스가 없으면 사용할 수 없다 |
2 |
float된 박스들을 감싸는 박스를 다시 floatLleft;한다 - 그 float까지 연쇄적으로 해제해야하면 width값을 주어야 크로스브라우징된다. |
3 |
float된 박스들을 감싸는 박스에 overflow:auto/overflow:hidden한다 - 세로 스크롤바가 생길 경우 사용할 수 없으면 width값을 주어야 크로스브라우징 된다. |
4 |
float된 박스들을 감싸는 박스에 height값을 준다 본문내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우가 아니면 사용이 불가능 |
5 |
float된 박스들을 감싸는 박스에 가상요소 :after를 주어 해제한다. - width값을 주어야 크로스 브라우징된다 |
출처 : http://blog.naver.com/leeminji25/130176619763
but
가장 좋은 방법은
html
1 2 3 4 | < div id = "container" > < div id = "left" >left</ div > < div id = "contents" >contents</ div > </ div > |
2 css
1 2 3 4 | #container:after { content : '' ; display : block ; height : 0 ; clear : both ;} *:first-child+html #container { min-height : 1px ;} /*IE7*/ # left { float : left ;} #contents { float : right ;} |
'World Wide Web > CSS' 카테고리의 다른 글
tbody 스크롤 만들기 (3) | 2015.07.14 |
---|---|
div에서 세로정렬 시키기 (0) | 2015.06.25 |
"..."을 css로 처리하는 방법 (0) | 2015.06.25 |
IE에서 PNG에 opacity사용시 검은배경 막기 (0) | 2015.05.13 |
float:left 썼을 때 가운데정렬 방법 (0) | 2014.12.24 |