-
[HTML&CSS] float 속성 레이아웃 문제ETC 2019. 8. 20. 09:32728x90
html태그에 float 속성을 적용했을 때 그 다음 태그에는 float속성을 적용하지 않아도 빈공간으로 태그가 들어가는 경우가 생깁니다.
그럴때 해결법으로 div에 clear속성을 적용하면 해결이 가능합니다.
<!DOCTYPE html> <html> <head> <style> .target1{ float:left; width:100px; height:100px; background-color: red; } .clear{ clear:both; } .target2{ float:left; width:100px; height:100px; background-color: blue; } </style> </head> <body> <div class="target1"> <h1>TEST1</h1> </div> <div class="target1"> <h1>TEST1</h1> </div> <div class="target1"> <h1>TEST1</h1> </div> <div class="clear"></div> <div class="target2"> <h1>TEST2<h1> </div> </body> </html>실행화면
728x90'ETC' 카테고리의 다른 글
TypeOrm Document 검색 사이트 (0) 2020.09.25 산업기능요원 참고 (0) 2020.04.16 오픈소스 아이콘 (0) 2020.01.22