재유's

[CSS] 박스모델(3) Float 본문

IT Story/　: : HTML5

[CSS] 박스모델(3) Float

Stella_NY 2019. 1. 21. 10:00

float 속성

박스[각주:1]를 부모의 왼쪽이나 오른쪽에 고정시키고 문장을 그 옆으로 흐르도록 하기 위한 속성


적용 가능한 값

속성

설명

left

 왼쪽

right

 오른쪽 

none

 해제

inherit

 부모값 상속


제약 사항

- 새로운 문단을 시작하기 위해서는 이전 float를 off 시켜야 한다.

- 부모요소가 float가 적용된 자식요소를 감싸지 못한다.


해결책

- 이전 float 속성을 해제

부모요소가 끝나기 전( 혹은 새로운 문단이 시작하기 전)

float:none; clear: both;가 적용된 block-level요소를 배치


방법1 : 빈 <div > 이용 

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        .clear {
            float: none;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="clear"></div>
</body>

</html>

방법2 : 부모의 :after 가상 클래스를 사용해서 아래코드 적용

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        div::after {
            content: '';
            display: block;
            float: none;
            clear: both;
        }
    </style>
</head>

<body>
    <div> ... 내용 ... </div>
</body>

</html>


  1. display : block-level에 속해 있는 것. inline은 박스가 아님! [본문으로]
저작자표시

'IT Story > 　: : HTML5' 카테고리의 다른 글

[CSS] background 배경  (0) 2019.01.22
[HTML5] 레이아웃 구성하기  (0) 2019.01.21
[CSS] 박스 모델(2) - margin, display  (0) 2019.01.18
[CSS] rgba 색상  (0) 2019.01.17
[CSS] 박스 모델(1) - border, overflow, shadow  (0) 2019.01.17
공유하기 링크
'IT Story/　: : HTML5' Related Articles more
Comments