專注搜索競價代運營

成長之選 ，效果之道！

免費咨詢熱線：17636682598

css浮動屬性float布局詳解代碼：清除浮動與左右浮動

css float浮動布局是目前主流布局方式，float有4種方式，常用的有兩種left、right；浮動樣式代碼怎么寫，在使用浮動后如何清除浮動

css浮動右浮動float: right

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"> 
  6.         <title>通高科技</title> 
  7.         <style> 
  8.             .div { 
  9.               background-color: yellowgreen; 
  10.               width: 100px; 
  11.               height: 100px; 
  12.               border: 1px dotted black; 
  13.               margin-left: 40px; 
  14.               float: left; 
  15.               margin-top: 10px; 
  16.              
  17.             } 
  18.             .div2{ 
  19.                 float: right; 
  20.             } 
  21.         </style> 
  22.     </head> 
  23.     <body> 
  24.         <div > 
  25.             <div class="div">左浮動1</div> 
  26.             <div class="div div2">右浮動2</div> 
  27.             <div class="div div2">右浮動3</div> 
  28.              
  29.         </div> 
  30.     </body> 
  31. </html> 
運行結(jié)果：

css浮動左浮動float: left

向左浮動代碼表示：float: left;

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"> 
  6.         <title>通高科技</title> 
  7.         <style> 
  8.             .div { 
  9.               background-color: yellowgreen; 
  10.               width: 100px; 
  11.               height: 100px; 
  12.               border: 1px dotted black; 
  13.               margin-left: 40px; 
  14.               float: left; 
  15.               margin-top: 10px; 
  16.              
  17.             } 
  18.          
  19.              
  20.         </style> 
  21.     </head> 
  22.     <body> 
  23.         <div > 
  24.             <div class="div">左浮動1</div> 
  25.             <div class="div">左浮動2</div> 
  26.             <div class="div">左浮動3</div> 
  27.              
  28.         </div> 
  29.     </body> 
  30. </html> 

運行結(jié)果：

 

css浮動清除屬性clear

clear 屬性規(guī)定哪些元素可以在清除的元素旁邊以及在哪一側(cè)浮動。（left、right、both、none、inherit）
實例：5個左浮動

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"> 
  6.         <title>通高科技</title> 
  7.         <style> 
  8.             .div { 
  9.               background-color: yellowgreen; 
  10.               width: 100px; 
  11.               height: 100px; 
  12.               border: 1px dotted black; 
  13.               margin-left: 40px; 
  14.               float: left; 
  15.              
  16.             } 
  17.             .div1{ 
  18.                 float: left; 
  19.                 background-color: yellowgreen; 
  20.                 width: 100px; 
  21.                 height: 100px; 
  22.                 border: 1px dotted black; 
  23.                 margin-left: 40px; 
  24.                 margin-top: 10px; 
  25.                 clear: left; 
  26.             } 
  27.              
  28.              
  29.         </style> 
  30.     </head> 
  31.     <body> 
  32.         <div > 
  33.             <div class="div">左浮動1</div> 
  34.             <div class="div">左浮動2</div> 
  35.             <div class="div ">左浮動3</div> 
  36.             <div class="div">左浮動4</div> 
  37.             <div class="div">左浮動5</div> 
  38.         </div> 
  39.     </body> 
  40. </html> 

運行效果：

需求:對3號塊取消左浮動

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"> 
  6.         <title>通高科技</title> 
  7.         <style> 
  8.             .div { 
  9.               background-color: yellowgreen; 
  10.               width: 100px; 
  11.               height: 100px; 
  12.               border: 1px dotted black; 
  13.               margin-left: 40px; 
  14.               float: left; 
  15.               margin-top: 10px; 
  16.              
  17.             } 
  18.             .div1{ 
  19.                 float: left; 
  20.                 background-color: yellowgreen; 
  21.                 width: 100px; 
  22.                 height: 100px; 
  23.                 border: 1px dotted black; 
  24.                 margin-left: 40px; 
  25.                 margin-top: 10px; 
  26.                 clear: left; 
  27.             } 
  28.              
  29.              
  30.         </style> 
  31.     </head> 
  32.     <body> 
  33.         <div > 
  34.             <div class="div">左浮動1</div> 
  35.             <div class="div">左浮動2</div> 
  36.             <div class="div div1">左浮動3</div> 
  37.             <div class="div">左浮動4</div> 
  38.             <div class="div">左浮動5</div> 
  39.         </div> 
  40.     </body> 
  41. </html> 

運行結(jié)果：

對3號塊取消浮動后。3號塊沒有浮動，4號.5號塊繼續(xù)左浮動。

本文分類：營銷學(xué)院

瀏覽次數(shù)：30次瀏覽

發(fā)布日期：2022-07-06 14:57:34

本文鏈接：http://www.ozone-depletion.net/edu/2420.html