div 안에 있는 요소(자식)가 float 를 했을 때, div 안에서 벗어나지 않기

 


>> 소스코드


>> 모양 ( float: right 적용 전 )



위와 같이 div 안에 input 버튼을 놓고 float right 를 해서 보여주고 싶을 때가 있습니다. 


>> 소스코드 


>> 모양 ( float: right 적용 후 )



위와 같이 

float : right

를 하면 원하는 모양이 아니라 아래의 요소들과 겹쳐서 나타나게 됩니다.

위를 개발자 도구로 찍어보면


버튼은 아얘 상위 부모의 크기에 반영되지 않고 있습니다.



위의 소스 코드에서 div에 

overflow : hidden;

을 추가해주면 ?? 



상위 div 는 float-right 를 적용한 자식을 포함하고 있고, 다른 요소들과 침범당하지 않고 있습니다.