css float 속성 정리

소개

css float 정리글

정리

float 란?

레이아웃 구성 시 요소를 가로 정렬하기 위해 사용하는 속성 이미지 주변에 텍스트를 감싸기 위해 만들어진 속성

float 속성 종류

• none (default)
• right
• left
• inherit

none

요소를 뜨게 두지 않는다

const Box1 = styled(Box)`
    background-color: red;
    float: none;
`;

const Box2 = styled(Box)`
    background-color: green;
`;

const Box3 = styled(Box)`
    background-color: skyblue;
`;

const Blog = () => {
    return (
        <Div>
            <Box1>1</Box1>
            <Box2>2</Box2>
            <Box3>3</Box3>
        </Div>
    )
}

right

요소를 오른쪽으로 이동시킨다 (우측 우선 정렬)

const Box1 = styled(Box)`
    background-color: red;
    float: right;
`;

left

요소를 왼쪽으로 이동시킨다 (좌측 우선 정렬)

const Box1 = styled(Box)`
    background-color: red;
    float: left;
`;

inherit

부모의 속성을 상속받는다.

const Div = styled.div`
   margin: 0 100px 0 100px;
    float: right;
`;

const Box1 = styled(Box)`
    background-color: red;
    float: inherit;
`;

const Box2 = styled(Box)`
    background-color: green;
    float: inherit;
`;

const Box3 = styled(Box)`
    background-color: skyblue;
    float: inherit;
`;

clear

float 속성을 취소시켜주는 속성 clear : right -> float : right를 취소시킨다

const Box1 = styled(Box)`
    background-color: red;
    float: right;
`;

const Box2 = styled(Box)`
    background-color: green;
    float: right;
`;

const Box3 = styled(Box)`
    background-color: skyblue;
    clear: both;
`;

float 사용시 주의사항

left right로 부유속성 지정 시 display absolute속성은 같이 사용하면 안된다