반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

블로그

float의 문제점 본문

CSS

float의 문제점

오구리 2020. 5. 28. 22:42
728x90
반응형

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float의 문제점</title>
    <style>
        .parent{}
        .parent, footer{width:1000px; background-color:#ff0; margin:0 auto;}
        footer{padding:30px 0; text-align:center; margin-top:30px;}
        .left{background-color:#f00; width:200px; float:left;}
        .right{background-color:#0f0; width:700px; float:right;}
    </style>
</head>
 
 
<body>
 
  <!-- overflow:hidden;안쓰면 자식이 붕떠버려서 밑에있는 자식을 못밀어준다 
       근데 높이가 결정되면overflow:hidden; 없어도됨-->
       
    <div class="parent">
        <div class="left">좌측</div>
        <div class="right">우측<br><br><br><br><br><br></div>
    </div>
    <footer>푸터영역</footer>
</body>
</html>
 
 
 cs

overflow:hidden을 안줬을 경우

좌측과 우측(=자식)이 위로 떠버리기 때문에

밑에 있는 자식(푸터영역)을 못 밀어줌

그래서 overflow:hidden으로 해결

 

 

 

 

 

1
2
3
4
5
6
7
   <style>
        .parent{overflow:hidden;}
        .parent, footer{width:1000px; background-color:#ff0; margin:0 auto;}
        footer{padding:30px 0; text-align:center; margin-top:30px;}
        .left{background-color:#f00; width:200px; float:left;}
        .right{background-color:#0f0; width:700px; float:right;}
    </style>  
 cs

하지만 높이가 결정되면

overflow:hidden필요없음

 

반응형
저작자표시

'CSS' 카테고리의 다른 글

폰트어썸 사용하기(Font Awesome)  (2) 2020.05.31
CSS background-size 속성  (0) 2020.05.30
종속관련&화면 정가운데 배치하기  (0) 2020.05.28
CSS 텍스트스타일 text-transform 속성 - 텍스트 대·소문자 변환하기  (0) 2020.05.23
CSS display속성 - 화면 배치 방법 결정하기  (0) 2020.05.22
'CSS' Related Articles more