AOA棋牌

专注搜索竞价代运营

成长之选 ,效果之道!

免费咨询热线: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>AOA棋牌科技</title>&nbsp;
  7.  ;       <style> 
  8.      &nbsp;      .div { 
  9.            &nbsp;  background-color: yellowgreen; 
  10. &nbsp;             width: 100px; 
  11.               height: 100px; 
  12.         &nbsp;     border: 1px dotted black; 
  13.     &nbsp;    &nbsp;    margin-left: 40px; 
  14.               float: left; 
  15.      ;         margin-top: 10px; 
  16.             &nbsp;
  17.  &nbsp;  &nbsp;       } 
  18.       &nbsp;     .div2{ 
  19.                 float: right; 
  20.        ;     } 
  21.   &nbsp;     </style> 
  22.     </head> 
  23.     <body> 
  24.      &nbsp;  <div&nbsp;> 
  25.             <div class="div">左浮动1</div> 
  26.             <div class="div div2">右浮动2</div> 
  27.             <div class="div div2">右浮动3</div> 
  28.             &nbsp;
  29.         </div> 
  30.     </body> 
  31. </html> 
运行结果:

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>AOA棋牌科技</title> 
  7.    ;     <style> 
  8.         ;   &nbsp;.div { 
  9.               ;background-color: yellowgreen; 
  10.        &nbsp;      width: 100px; 
  11.   &nbsp; &nbsp;         height: 100px; 
  12.  ;             border: 1px dotted black; 
  13.               margin-left: 40px; 
  14.               float: left; 
  15.   &nbsp;           margin-top: 10px; 
  16.      ;        
  17.       &nbsp;     } 
  18.       &nbsp;  
  19. &nbsp;     &nbsp;      
  20.  ;       <;/style> 
  21.     </head> 
  22.     <body> 
  23.        &nbsp;<div > 
  24.             <div class="div">左浮动1</div> 
  25.             <div class="div">左浮动2</div> 
  26.             <div class="div">左浮动3</div> 
  27.        &nbsp;     
  28.     &nbsp;   </div> 
  29.     </body> 
  30. </html> 

运行结果:

 

css浮动清除属性clear

clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。(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>AOA棋牌科技</title> 
  7.    &nbsp;   &nbsp;<style> 
  8.             .div&nbsp;{ 
  9.           &nbsp;   background-color: yellowgreen; 
  10.              &nbsp;width: 100px; 
  11.           &nbsp;   height: 100px; 
  12.               border: 1px dotted black; 
  13.               margin-left: 40px; 
  14.               float: left; 
  15.    &nbsp;         
  16.      &nbsp;&nbsp;     } 
  17.  &nbsp;          .div1{ 
  18.                 float: left; 
  19.                 background-color: yellowgreen; ;
  20.    ;             width: 100px; 
  21.  ;     &nbsp;         height: 100px; 
  22.            &nbsp;    border: 1px dotted black; 
  23.                 margin-left: 40px; 
  24.   ;              margin-top: 10px; 
  25. &nbsp;               clear: left; 
  26.       ;     ; } 
  27.   &nbsp;          
  28.              
  29.    ;     </style>&nbsp;
  30.     </head> 
  31.     <body> 
  32.         <div&nbsp;> 
  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.      &nbsp;  </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>AOA棋牌科技</title> 
  7.       ;  <style> 
  8.  &nbsp;&nbsp;         .div { 
  9.  &nbsp;      ;      background-color: yellowgreen; 
  10.  ;             width: 100px; 
  11.    &nbsp;          height: 100px; 
  12.             &nbsp; border: 1px dotted&nbsp;black; 
  13.       &nbsp;       margin-left: 40px; 
  14.               float: left; 
  15.           ;  &nbsp; margin-top: 10px; 
  16.           ;   
  17.             } 
  18.   &nbsp;&nbsp;        .div1{ 
  19.                 float: left; 
  20.                 background-color: yellowgreen; ;
  21.              &nbsp;  width: 100px; 
  22.              ;   height: 100px; 
  23.                 border: 1px dotted black; 
  24.               &nbsp; margin-left: 40px; 
  25.     &nbsp;           margin-top: 10px; 
  26.  &nbsp;   ;           clear: left; 
  27.         &nbsp;   }&nbsp;
  28.            &nbsp; 
  29.              
  30. &nbsp;       </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.        &nbsp;</div> 
  40.     </body> 
  41. </html> 

运行结果:

对3号块取消浮动后。3号块没有浮动,4号.5号块继续左浮动。

本文分类:营销学院

浏览次数:30次浏览

发布日期:2022-07-06 14:57:34

本文链接:http://czxhbook.com/edu/2420.html

"
"