css 공간의 이해 1 - BFC

1. block formatting context

블록 속성을 가진 자식 요소에 float 을 부여하게 되면,

부모 요소는 자신의 높이값을 잃게 된다. 

부모는 자식을 포함하므로, 자식의 높이값을 모두 품을것이라고 생각 할 수 있지만,

모든 요소에 해당하지는 않는다. 아래 사이트에 여러가지 예가 정리 되어 있으니 참조바람, 대표적으로 float 속성을 가진 자식요소가 있을때이다.

float은 원래 이미지와 문단의 정렬을 위해 사용하는데,

이미지를 좌측, 이미지를 감싸고 문단의 내용이 들어가게 하게 정렬이 된다.

이렇듯, 부유하는 속성을 가진 float 이 적용된 요소의 부모요소는 자식요소 의 높이값을 포함하지 않게 되는데,

이럴때 문제점~!!

1. 배경에 적용한 색상이나 배경이미지가 잘리는 경우

2. 다음에 오는 요소가 위로 올라와 겹침현상이 생기는 경우

이를 위한 방법~!!!

1. 부모요소에 overflow : hidden | auto 를 주게 되면, 부모요소는 자식요소의 높이값을 모두 품게 되어, 배경색이나, 이미지가 모두 표시된다.

2. display:flow-grow를 줘도 된다. 브라우저별 지원이 상이하므로 체크 하도록 한다. 위와 같은 결과를 얻을 수 있다.

 

---

HTML 부분

  <div>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, voluptate atque ullam hic incidunt in quidem quo doloribus tempore illum maiores  animi alias. Saepe, doloremque, consequatur id neque atque illo.
  </div>
  <div class="container">
	<div class="box left">left</div>
	<div class="box right">right</div>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, omnis, labore, aliquid <span class="clear">commodi tempora</span> earum neque laborum est accusamus molestiae sed accusantium totam perspiciatis. Quas, dolorem ratione recusandae dignissimos autem?
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, omnis, labore, aliquid <span class="clear">commodi tempora</span> earum neque laborum est accusamus molestiae sed accusantium totam perspiciatis. Quas, dolorem ratione recusandae dignissimos autem?
	</p>	
  </div>

 

---

CSS 부분

		.container{
			border: 10px solid #f90;
			overflow: hidden;
			/*floating된 자식요소의 높이값을 인식하지 못함. 
				그래서, 해결방법으로 overflow를 사용함.
				overflow : 새로운 body를 만들기 때문.
			*/
		}
		.box{
			width:200px;
			height:200px;
			border-radius:50%;
			background: #fe0;
		}
		p{
			border: 5px solid blue;
			overflow: hidden;
		}
		.left{float:left;}
		.right{float:right;}

 

---