float - wkdalfo12/project_study GitHub Wiki

  • float은 공중에 떠있는것이다.(왼쪽오른쪽정렬이아니라)
  • float 속성을 준 녀석 위에 있는 녀석에게는 영향을 주지않는다.
 a
 b float 
 c
 가 있을때 a는 보이고 c는 b의 뒤로 들어가있는상태로 b는 붕떠있기때문에 b가 위로보임
  • float이 선언된 엘리먼트는 다른 컨텐츠가 피해간다.

글자를넣거나할때 float가 들어가면 그 부분을 피해서 그 부분 이외에만 글자가 들어가짐

  • float: left - 왼쪽으로 가짐
  • float: right- 오른쪽으로 가짐

왼쪽 오른쪽 상단은 고정하고 가운데만 늘렸다 줄었다 했을때 움직이게 하려면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
             <style >
                 div{border: 1px #F00 solid; height: 80px;}
                 .center{margin:0 110px;}
                 .left{width: 100px; float: left;}
                 .right{width: 100px; float: right;}
             </style>
</head>
<body>
                <div class="left">
                     L
                </div>
                <div class="right">
                     R              <----- left에 float:left 넣어주면 뒤에center가 들어가고 그 밑에
                                                        right 이 들어가기때문에 
                                                        center랑 right 자리를 바꿔주면 float이 
                                                        들어가서 left 는 왼쪽 right은 
                                                        오른쪽 으로 가고 center는 가운데로 옴!
                </div>
                <div class="center">
                     C
                </div>
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️