floatプロパティ

Tag:

ブロック要素を横並びにするためのfloatプロパティについて紹介します。

floatプロパティの使用例

floatの使用例
Before After
html
        <div class="htmlcss_float">
          <div class="clearfix">
            <div class="wrap-box">
              <div class="boxA">A</div>
              <div class="boxB">B</div>
            </div>
            <div class="boxC">C</div>
          </div>
          <div class="boxD">D</div>
        </div>
        
css
        .htmlcss_float{
            width:200px;
            border:solid 1px #ccc;
        }
        .htmlcss_float .boxA {
            background-color: #81D674;
            height: 100px;
            width:150px;
        }
        .htmlcss_float .boxB {
            background-color: #8BA7D5;
            height: 50px;
            width:25px;
        }
        .htmlcss_float .boxC {
            background-color: #EDA184;
            height: 70px;
            width:25px;
        }
        .htmlcss_float .boxD {
            background-color: #D27EB3;
            height: 30px;
            width:200px;
        }
        
        .htmlcss_float{
            width:200px;
            border:solid 1px #ccc;
        }
        .htmlcss_float .wrap-box {     /* 追加 */
            float:left;                /* 追加 */
        }                              /* 追加 */
        .htmlcss_float .boxA {
            background-color: #81D674;
            height: 100px;
            width:150px;
            float:right;               /* 追加 */
        }
        .htmlcss_float .boxB {
            background-color: #8BA7D5;
            height: 50px;
            width:25px;
            float:left;                /* 追加 */
        }
        .htmlcss_float .boxC {
            background-color: #EDA184;
            height: 70px;
            width:25px;
            float: right;              /* 追加 */
        }
        .clearfix:after{               /* 追加 */
            display:block;             /* 追加 */
            clear:both;                /* 追加 */
            content:"";                /* 追加 */
        }
        .htmlcss_float .boxD {
            background-color: #D27EB3;
            height: 30px;
            width:200px;
        }
        
表示

A
B
C
D

A
B
C
D

スポンサーリンク