float

11241 ワード
float テキストリンク
floatはその名の通り「漂う」という意味です.
通常、画像をテキストに変換するために使用されます.
次の2つの例を比較します.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <style media="screen">


    .box{
     float:left;
      width:100px;
      height:50px;
      border:solid;
      border-width:10px;
      border-color:green;
    }
    section{
      
      border:solid;
      border-width:10px;
      border-color: yellow;
    }

    </style>
  </head>
  <body>
  <div class="box">
    나는 떠 있다 !!!!
  </div>
  <section>
    이 경우 , section 요소는 div 태그의 뒤에 적혀있다. 하지만 div가 왼쪽으로 float이 되고 다음과 같이 된다
    - section 태그 안의 텍스트들이 div 의 주위에 뜨게 되며 section이 감싸게 된다 .
      만약 우리가 section이 float된 요소 후에 나타나도록 하려면 어떻게 해야할까?
  </section>
  </body>
</html>

float要素の後にsectionを表示させたいなら
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <style media="screen">


    .box{
     float:left;
      width:100px;
      height:50px;
      border:solid;
      border-width:10px;
      border-color:green;
    }
    section{
      clear:left;
      border:solid;
      border-width:10px;
      border-color: yellow;
    }

    </style>
  </head>
  <body>
  <div class="box">
    나는 떠 있다 !!!!
  </div>
  <section>
  clear를 쓰게되면 section을 float된 div 아래로 내려간다.
  clear를 써서 왼쪽으로 float된 요소를 클리어한것이다. 이는 right, both에도 적용가능하다
  </section>
  </body>
</html>
になる
select:windows pipeのシミュレーション
Wecode初日TIL(21.111.29)