專注搜索競(jìng)價(jià)代運(yùn)營(yíng)

成長(zhǎng)之選 ，效果之道！

免費(fèi)咨詢熱線：17636682598

css浮動(dòng)屬性float布局詳解代碼：清除浮動(dòng)與左右浮動(dòng)

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

css浮動(dòng)右浮動(dòng)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">左浮動(dòng)1</div> 
  26.             <div class="div div2">右浮動(dòng)2</div> 
  27.             <div class="div div2">右浮動(dòng)3</div> 
  28.              
  29.         </div> 
  30.     </body> 
  31. </html> 
運(yùn)行結(jié)果：

css浮動(dòng)左浮動(dòng)float: left

向左浮動(dòng)代碼表示：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">左浮動(dòng)1</div> 
  25.             <div class="div">左浮動(dòng)2</div> 
  26.             <div class="div">左浮動(dòng)3</div> 
  27.              
  28.         </div> 
  29.     </body> 
  30. </html> 

運(yùn)行結(jié)果：

 

css浮動(dòng)清除屬性clear

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

  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">左浮動(dòng)1</div> 
  34.             <div class="div">左浮動(dòng)2</div> 
  35.             <div class="div ">左浮動(dòng)3</div> 
  36.             <div class="div">左浮動(dòng)4</div> 
  37.             <div class="div">左浮動(dòng)5</div> 
  38.         </div> 
  39.     </body> 
  40. </html> 

運(yùn)行效果：

需求:對(duì)3號(hào)塊取消左浮動(dòng)

  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">左浮動(dòng)1</div> 
  35.             <div class="div">左浮動(dòng)2</div> 
  36.             <div class="div div1">左浮動(dòng)3</div> 
  37.             <div class="div">左浮動(dòng)4</div> 
  38.             <div class="div">左浮動(dòng)5</div> 
  39.         </div> 
  40.     </body> 
  41. </html> 

運(yùn)行結(jié)果：

對(duì)3號(hào)塊取消浮動(dòng)后。3號(hào)塊沒(méi)有浮動(dòng)，4號(hào).5號(hào)塊繼續(xù)左浮動(dòng)。

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

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

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

本文鏈接：http://www.nepalimancheystudio.com/edu/2420.html