ETC

[HTML&CSS] float 속성 레이아웃 문제

KMSEOP 2019. 8. 20. 09:32
728x90

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