css float 속성 문제 질문
-
게시물 수정 , 삭제는 로그인 필요
질문)
float 속성을 쓰면 붕 뜨는 효과가 생겨, 그 뒤로 오는 (float 속성을 안쓴) 태그들이 붕 떠있는 공간에 가서 자리를 채우는걸로 알고 있습니다.
현재 side와 header태그에 float 속성을 준 상태입니다.
뒤따라오는 content와 footer가 붕 떠있는 side의 부분과는 겹쳐있지만 왜 header 부분에는 겹치지 않는지 궁금합니다.
header도 float 속성을 주었기 때문에 원래대로라면
side와 header 둘 다에 가려져 content와 footer가 화면에 안보이게 되는게 맞지 않나요?
쉽고 자세한 설명 부탁드립니다~
코드 첨부하겠습니다.
<style>
body {background: #d1c4e9;}
#wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color: #fff; text-align: center; text-transform: uppercase;}
#side {float: left; width: 300px; height: 900px; line-height: 900px; background-color: #4527a0;}
#header {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #512da8;}
#content {width: 700px; height: 300px; line-height: 300px; background-color: #5e35b1;}
#footer {width: 700px; height: 300px; line-height: 300px; background-color: #673ab7}
</style>
</head>
<body>
<div id="wrap">
<div id="side">side</div>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
질문)
float 속성을 쓰면 붕 뜨는 효과가 생겨, 그 뒤로 오는 (float 속성을 안쓴) 태그들이 붕 떠있는 공간에 가서 자리를 채우는걸로 알고 있습니다.
현재 side와 header태그에 float 속성을 준 상태입니다.
뒤따라오는 content와 footer가 붕 떠있는 side의 부분과는 겹쳐있지만 왜 header 부분에는 겹치지 않는지 궁금합니다.
header도 float 속성을 주었기 때문에 원래대로라면
side와 header 둘 다에 가려져 content와 footer가 화면에 안보이게 되는게 맞지 않나요?
쉽고 자세한 설명 부탁드립니다~
코드 첨부하겠습니다.
<style>
body {background: #d1c4e9;}
#wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color: #fff; text-align: center; text-transform: uppercase;}
#side {float: left; width: 300px; height: 900px; line-height: 900px; background-color: #4527a0;}
#header {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #512da8;}
#content {width: 700px; height: 300px; line-height: 300px; background-color: #5e35b1;}
#footer {width: 700px; height: 300px; line-height: 300px; background-color: #673ab7}
</style>
</head>
<body>
<div id="wrap">
<div id="side">side</div>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
#css float #css float 속성 #css float 가운데 정렬 #css float left #css float 해제 #css float clear #css floating #css float center #css floating button #css float bottom
