CSSにおけるフラットフローティングの原因と問題点の分析-CSSチュートリアル-php.cn

CSSにおけるフラットフローティングの原因と問題点の分析

不言

リリース： 2018-08-30 11:12:11

オリジナル

1845 人が閲覧しました

この記事の内容は、CSS でのフラットフローティングの原因とそれがもたらす問題の分析に関するもので、困っている友人が参考になれば幸いです。

floatの理由と副作用

floatの4つのパラメータ

left、right、none、inherit

float floatの理由

floatを使用すると、要素は標準のドキュメントフローから離脱します。 (標準的な文書フローでは、ブロック要素や線要素などの要素種類をそれぞれの特徴に合わせて配置して表示します。属性は異なりますが、すべて上から下、左から右の順に配置されています)

float フローティングの副作用

2 つのブロックレベル要素はフローティング要素によってカバーされます

<style type="text/css">
    .box{
          border: 4px solid #000000;      
          width: 200px;      
          height: 200px;      
          display: inline-block;    
          }
    .itemSmall_1{
          background-color: chartreuse;      
          width: 40px;      
          height: 40px;      
          border: 2px solid #000000;      
          /* float: left; */
    }
    .itemSmall_2{
          background-color: chartreuse;      
          width: 40px;      
          height: 40px;      
          border: 2px solid #000000;      
          float: left;    
          }
    .itemBig{
          background-color: blue;      
          width: 150px;      
          height: 150px;      
          border: 2px solid #000000;    
          }
  </style><body>
    <div class="box">
      <div class="itemSmall_1">

      </div>
      <div class="itemBig">

      </div>
    </div>
    <div class="box">
      <div class="itemSmall_2">

      </div>
      <div class="itemBig">

      </div>
    </div>
  </body>

ログイン後にコピー

* 1 つのブロック要素と 1 つのインライン要素。テキストなどのインライン要素はフロート要素の周囲にフロートし、フロート要素用のスペースを残します。
CSSにおけるフラットフローティングの原因と問題点の分析

<style type="text/css">
    .box{
          border: 4px solid #000000;      
          width: 200px;      
          height: 200px;      
          display: inline-block;      
          vertical-align: top;    
          }
    .itemSmall_1{
          background-color: chartreuse;      
          width: 40px;      
          height: 40px;      
          border: 2px solid #000000;      
          /* float: left; */
    }
    .itemSmall_2{
          background-color: chartreuse;      
          width: 40px;      
          height: 40px;      
          border: 2px solid #000000;      
          float: left;    
          }
    .itemBig{
          background-color: blue;      
          width: 150px;      
          height: 150px;      
          border: 2px solid #000000;    
          }
  </style>
  <body>
    <div class="box">
      <div class="itemSmall_1">
      </div>
      <div class="itemBig">
      </div>
    </div>

    <div class="box">
      <div class="itemSmall_2">
      </div>
      行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素    </div>
  </body>

ログイン後にコピー

* 2 つのブロックレベル要素がフローティングで、親要素が折りたたまれています
CSSにおけるフラットフローティングの原因と問題点の分析

<style type="text/css">
    .box{
          border: 4px solid #000000;      
          float: left;    
          }

    .itemSmall_2{
          background-color: chartreuse;      
          width: 40px;     
          height: 40px;      
          border: 2px solid #000000;      
          float: left;    
          }  
     .itemBig2{
           background-color: blue;      
           width: 150px;      
           height: 150px;      
           border: 2px solid #000000;      
           float: left;    
           }
  </style>
  <body>
    <div class="box">
      <div class="itemSmall_2">
      </div>
      <div class="itemBig2">
      </div>
    </div>
  </body>

ログイン後にコピー