포지셔닝 관련 CSS - float

포지셔닝 관련 CSS - float

• float 속성은 웹 요소를 문서 위에 떠 있게 만듭니다. 여기서 '떠 있다'라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻입니다.
• float : left / right / none
• float 속성에서 사용할 수 있는 값에는 왼쪽(left)과 오른쪽(right), 그리고 좌우 어느 쪽도 아닌 것(none)이 있습니다.

 

속성 값	설명
left	해당 요소를 문서의 왼쪽으로 배치합니다.
right	해당 요소를 문서의 오른쪽으로 배치합니다.
none	좌우 어느 쪽으로도 배치하지 않습니다.

• float : left나 float : right를 지정하면 너비 값은 콘텐츠를 표시할 때 필요한 만큼만 차지하고 다른 요소가 들어올 만큼의 공간을 비워둡니다.
• 이미지와 텍스트를 나란히 표시하려고 할 때는 이미지에 float 속성을 사용합니다.

img에 float : left를 지정하여 텍스트와 나란히 배치

<style>
    .exam1 {width: 600px; height: 280px; border: 2px solid blue;}
    .exam1 img {
        float: left;
        margin: 30px;
    }
    .exam1 h2 {font-size: 30px; margin: 40px 0;}
    .exam1 p {font-size: 18px; text-align: justify; margin-right: 15px;}
</style>      

• box1 선택자가 적용된 요소가 표시된 후 오른쪽 공간에 box2 선택자를 사용한 요소가 옵니다. 다른 요소가 그 옆으로 계속 올 수 있습니다.

 

box1,2,3에는 각각 float : left를 지정하고 box4에는 float : right를 지정

<style>
    .exam2 {width: 900px; height: 160px; border: 2px solid;}
    .box1 {float: left; width: 150px; height: 100px; border: 2px solid; background: red; margin: 20px}
    .box2 {float: left; width: 150px; height: 100px; border: 2px solid; background: blue; margin: 20px}
    .box3 {float: left; width: 150px; height: 100px; border: 2px solid; background: purple; margin: 20px}
    .box4 {float: right; width: 150px; height: 100px; border: 2px solid; background: green; margin: 20px}    
</style>