「CSS」浮動要素floatプロパティのサンプル

構文
float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、
テキストやインライン要素がその周りを回りこめるように定義します。
float: left;要素は、必ずその包含ブロックの左側に浮動します。
float: right;要素は、必ずその包含ブロックの右側に浮動します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cft {
/*要素は、必ずその包含ブロックの左側に浮動*/
float: left;
height: 100px;width: 150px;
border: 1px solid #000;
background-color: skyblue;
text-align: center;
}
</style>
<div class="cft">floatプロパティ</div>
<p>項目1</p>
<p>項目2</p>
<p>項目3</p>
<style> .cft { /*要素は、必ずその包含ブロックの左側に浮動*/ float: left; height: 100px;width: 150px; border: 1px solid #000; background-color: skyblue; text-align: center; } </style> <div class="cft">floatプロパティ</div> <p>項目1</p> <p>項目2</p> <p>項目3</p>
<style>
  .cft {
  /*要素は、必ずその包含ブロックの左側に浮動*/
    float: left;
    height: 100px;width: 150px;
    border: 1px solid #000;
    background-color: skyblue;
    text-align: center;
  }
</style>
<div class="cft">floatプロパティ</div>
<p>項目1</p>
<p>項目2</p>
<p>項目3</p>

 

CSS

Posted by arkgame