float

목차

• float
• clear

 

---

float

사전적인 의미는 "떠있다"

HTML요소에 float가 적용하면, 왼쪽이나 오른쪽으로 배치시킬수 있음

속성값으론 left, right, none 등이 있음

img {
    width: 150px;
    float: left;
}

<img src="../Example/IMG/salad.jpg" alt="샐러드">
<p>
    문명이 출현하면서 사회집단 또는 부족에 따라서 전통적인 요리법이 정착되기 시작했다.
    <br>
    기후, 토양, 동물 분포와 같은 지역적인 요인에 따라서 서로 다른 전통이 만들어졌다.
    <br>
    사람들이 얼마나 청결한 것을 좋아하는가와 자신들의 사회구조를 지키기 위해서 어떤 종교적 금기를 지키는가에 따라서 요리법이 달라지기도 했다.
    <br>
    전통 음식은 국가, 지역별로 다음과 같이 나뉜다
</p>

---

 

clear

float 취소시키기

취소시키고 싶은 부분부터 clear: (left, right, both)

img {
    width: 150px;
    float: left;
}
.p_2 {
    clear: both;
}

<p class="p_2">
    <br>
    기후, 토양, 동물 분포와 같은 지역적인 요인에 따라서 서로 다른 전통이 만들어졌다.
    <br>
    사람들이 얼마나 청결한 것을 좋아하는가와 자신들의 사회구조를 지키기 위해서 어떤 종교적 금기를 지키는가에 따라서 요리법이 달라지기도 했다.
    <br>
    전통 음식은 국가, 지역별로 다음과 같이 나뉜다
</p>

---

 

 

Github

Link