[html][css] float 속성에 대해 / 수평 수직 정렬/ float해제 / clearfix

■float

요소에 float속성을 적용하면 적용된 요소 주변으로 text가 흐르게 된다.

 

<article>
  <div class="picture"></div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>

 

article{
  
}
article .picture{
  width: 300px;
  height: 150px;
  background: yellow;
  float: left;
  margin-right: 10px;
}

흐르는 부분을 해제하고 싶으면

clear : left;를 주면 됨

left로 흐르게 했으니 left를 클리어하는 것임

 

clear을 해주지 않는다면

세개 float: left가 있는 박스 후에 아무것도 없는 노란 박스가 겹쳐져서 나오기 때문에

clear:left 속성을 주어야한다.

clear: both를 주어도된다. 그러면 right이든지 left이든지 clear한다는 뜻이다.

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box4"></div>

.box{
  width:150px;
  height: 150px;
  background: gray;
  color: white;
  font-size: 30px;
  margin: 10px;
  float: left;
}
.box4{
  width: 200px;
  height: 100px;
  background: yellow;
  clear: left;
}

 

---

해제하는 법

1. 다음 형제 요소에서 해제

float속성이 추가된 요소의 다음 형제요소에 clear속성 추가

다음요소 형제가 있을 때는 좋은데 없으면 쓰기 힘들다.

 

2. 부모 요소에서 해제

float속성이 추가된 요소의 부모 요소에 overflow속성 추가 

그런데 이것은 편법이다. overflow랑 float이랑 아무 관련이 없기 때문이다.

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent{
  overflow: hidden;
}
.child{
  float: left;
}

3. 부모 요소에서 해제2 (추천)

float속성이 추가된 요소의 부모 요소에 미리 지정된 clearfix클래스 추가

clearfix가 있는 부모안에 자식으로는 float이 있는 자식만 있어야하고 아닌 자식은 밖에 있어야한다.

<div class="parent clearfix">
  <div class="child"></div>
  <div class="child"></div>
</div>

.clearfix::after{
  content: "";
  clear: both;
  display: block;
}
.child{
  float: left;
}

예제보기↓

.clearfix::after{
  content: "";
  clear: both;
  display: block;
}
.float-box{
  width:100px;
  height: 100px;
  background: orange;
  margin: 10px;
  float: left;
}
.new-box{
  width: 300px;
  height: 300px;
  background: cyan;
}

 

<div class="clearfix">
  <div class="float-box">1</div>
<div class="float-box">2</div>
<div class="float-box">3</div>
<div class="float-box">4</div>

</div>
<div class="new-box"></div>

 

 

 

 

 

---

 

 

 

■display수정

float속성이 추가된 요소는 display속성이 대부분 block으로 바뀜

<span>1</span>
<span>2</span>
<span>3</span>

span{
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
}

span태그는 inline요소이기 때문에 가로 세로 값을 가질 수 없다.

 display: block;

이 요소를 추가하면 block요소로 바뀐다.

  float: left;

이 요소를 추가하면 저절로 block으로 바뀌고 왼쪽에서부터 쌓이고 right으로 하면 오른쪽에서 부터 쌓인다.

float: right;