CSS

CSS[Float&Clear]

developer_Michael 2023. 4. 3. 08:09
반응형

Float와 Clear는 CSS 레이아웃에서 중요한 속성 중 하나입니다. 

 

Float 속성은 요소를 왼쪽이나 오른쪽으로 떠있게 하여 다른 요소들이 그 주위를 감싸는 형태로 배치될 수 있도록 합니다. 

 

반면, Clear 속성은 Float 속성이 적용된 요소를 강제로 한 줄에 배치되게 하기 위해 사용됩니다.

 

Float 속성은 다음과 같이 사용합니다.

float: left; /* 왼쪽으로 떠있게 함 */
float: right; /* 오른쪽으로 떠있게 함 */
float: none; /* 떠있지 않은 상태 */

Float 속성은 일반적으로 이미지나 텍스트와 같은 컨텐츠를 감싸는 요소에 적용됩니다. 

 

예를 들어, 다음과 같이 HTML 코드가 있다고 가정해봅시다.

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        .container img {
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="example.jpg">
        <p>이미지 설명</p>
    </div>
</body>
</html>

위와 같이 float: left; 속성을 적용하면, 이미지는 왼쪽으로 떠있게 되고, 그 주변에 있는 p 요소는 이미지를 감싸게 됩니다.

 

 

Clear 속성은 Float 속성이 적용된 요소를 강제로 한 줄에 배치되게 하기 위해서 사용됩니다. 

 

다음과 같은 방법으로 사용합니다.

clear: left; /* 왼쪽쪽에 떠있는 요소 아래로 내려감 */
clear: right; /* 오른쪽에 떠있는 요소 아래로 내려감 */
clear: both; /* 양쪽에 떠있는 요소 아래로 내려감 */

예를 들어, 앞서 예시로 들었던 HTML 코드에서, 

 

이미지를 왼쪽으로 떠있게 한 후에 p 요소가 이미지를 감싸지 않고 밑으로 내려가는 경우가 발생할 수 있습니다. 

 

다음은 clear 속성을 사용하여 부모 요소 내에서 float 속성을 가진 자식 요소의 위치를 지정하는 예시입니다.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

위 예시에서 clearfix 클래스를 가진 부모 요소는 after 가상 요소를 사용하여 자식 요소의 위치를 지정합니다. 

 

clear: both;는 양쪽에 떠있는 자식 요소를 클리어하여 다음 줄에 표시하도록 합니다. 

 

이를 통해 부모 요소가 자식 요소를 올바르게 포함하고, 다음 요소들이 올바른 위치에 표시될 수 있도록 합니다.

반응형