首頁 >web前端 >css教學 >css中flaot浮動的原因及帶來的問題分析

css中flaot浮動的原因及帶來的問題分析

不言原創: 2018-08-30 11:12:111838瀏覽

這篇文章帶給大家的內容是關於css中flaot浮動的原因及帶來的問題分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

flaot浮動的原因與副作用

float中的四個參數

left，right，none，inherit

float 浮動的原因

使用浮動之後，元素會脫離標準的文件流程。（標準的文檔流就是依照不同的元素種類，如塊元素，行元素按照各自的特點去排列顯示，雖然屬性不同，但都是按照從上到下，從左到右的順序進行排列）

float 浮動的副作用

兩個區塊級元素，會被浮動元素覆寫

<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>

*一個區塊元素，一個行內元素。行內元素如文字會浮動在浮動元素的周圍，為浮動元素留出空間。
css中flaot浮動的原因及帶來的問題分析

<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>

*兩個區塊級元素浮動，出現父元素塌縮
css中flaot浮動的原因及帶來的問題分析

<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>

css中flaot浮動的原因及帶來的問題分析

flaot浮動的原因與副作用

float中的四個參數

float 浮動的原因

float 浮動的副作用

相關文章