免费发布信息
微信公众号

css浮动属性float布局详解代码:清除浮动与左右浮动

   来源:黔优网责任编辑:优优  时间:2023-11-02 13:59:33 浏览量:34
导读:css float浮动布局是目前主流布局方式,float有4种方式,常用的有两种left、right;浮动样式代码怎么写,在使用浮动后如何清除浮动目录1css浮动右浮动float: right2css浮动左浮动float: left3css浮动清除属性clearcs

css float浮动布局是目前主流布局方式,float有4种方式,常用的有两种left、right;浮动样式代码怎么写,在使用浮动后如何清除浮动

  • 目录

  • 1css浮动右浮动float: right

  • 2css浮动左浮动float: left

  • 3css浮动清除属性clear

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> 

运行结果:


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> 

运行结果:

 


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>通高科技</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> 

运行结果:

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

 
 
 
没用 0举报 收藏 0
免责声明:
黔优网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优网官方立场,请读者仅做参考。本文标题:css浮动属性float布局详解代码:清除浮动与左右浮动,本文链接:https://www.qianu.com/news/253161.html,欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法信息,请您立即点此【投诉举报】并提供有效线索,也可以通过邮件(邮箱号:kefu@qianu.com)联系我们及时修正或删除。
 
 

 

 
推荐图文
推荐商业资讯