float해제->.clearfix float해제할때 가상선택자인 :after를 .clearfix로 지정해두고 간단히 사용하기 /* Personal Reset */ .clearfix{ *zoom:1; }.clearfix:after{ content: ''; display: block; clear: both;} WEB/CSS 9년 전
inline-block-1 inline-block브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드를 만들 수 있는데, 그동안 이러한 박스 그리드를 만드는 방법은 float를 이용하는 것이었습니다. 하지만 이제 inline-block을 이용하면 만들기가 훨씬 더 쉽습니다. inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다. 두 접근법의 예제를 모두 살펴봅시다.힘든 방법(float를 이용).box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }저는 지금 떠 있어요!저는 지금 떠 있어요!저는 지금 떠 있어요!저는 지금 떠 있어요!저는 지금 떠 있어요!저는 지금 떠 있어요!저는.. WEB/CSS 9년 전
[IE]float, inline-block 핵*버그 (float vs inline-block) li 에 float:left 를 사용해왔지만 운영,유지보수 하면서 display:inline-block을 사용하면서 ie버전마다 깨지는 현상이 있어 핵을 검색해보았다.# IE 6, 7, 8에서 생기는 display:inline-block 문제 해결 : *display:inline; *zoom:1 - float (카테고리-HTML에도 설명) #container { background:#333; padding-bottom:20px; margin-bottom:20px; *zoom:1;} //after 미지원에 대한 ie6~7핵#container:after { content:""; clear:both; display:block; }#content { width:500px; background:#ccc; floa.. WEB/Hack*Bug 9년 전
기초 - float 해제 float된 직속부모에 가상선택자인 :after 부여 :after{content:""; display:block; clear:both;} ex) div.wrap > ul.list{float:left} / div.wrap:after{content:"",display:block;clear:both;} ps. 이 외 직속부모 속성에 overflow:hidden 추가하는 방법도 있다. 참조 : http://webclub.tistory.com/183 WEB/HTML 9년 전
