clear: both : float 속성을 해제한다
html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> .container { background: #FFD8D8; } .container img { float: left; } .container:after { content: ""; display: block; /* clear: both : float을 감싸고 있는 div태그가 끝나기전 float 속성을 해제한다 */ clear: both; } .footer { background: #D9E5FF; } </style> </head> <body> <div class="container"> <img src="http://placehold.it/120x200" /> <img src="http://placehold.it/120x200" /> </div> <div class="footer"> <address>안녕히 가세요.</address> </div> </body> </html> | cs |
결과
float 속성이 해제되어 화면이 깨지지 않는다
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정 (0) | 2017.06.17 |
|---|---|
| HTML5/CSS3 column-count : float 없이 다단 레이아웃 만들기 (0) | 2017.06.16 |
| HTML5/CSS3 empty-cells : 비어있는 셀을 표시할지 여부 (0) | 2017.06.14 |
| HTML5/CSS3 border-collapse: collapse : cell 사이의 공백을 제거한다 (0) | 2017.06.13 |
| HTML5/CSS3 table-layout: fixed : table요소의 cell의 너비를 동일하게 고정 (0) | 2017.06.12 |