<var id="5bizx"></var>
    <var id="5bizx"></var>

    <form id="5bizx"></form>
    <var id="5bizx"></var>

        <form id="5bizx"><small id="5bizx"></small></form>

          專注搜索競價代運營

          成長之選 ,效果之道!

          免費咨詢熱線: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> 
          運行結果:

          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號塊繼續左浮動。

          本文分類:營銷學院

          瀏覽次數:30次瀏覽

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

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

          人妻激情视频一区中文字幕,小雪被弄得很舒服,欧美成 人版中文字幕
            <var id="5bizx"></var>
            <var id="5bizx"></var>

            <form id="5bizx"></form>
            <var id="5bizx"></var>

                <form id="5bizx"><small id="5bizx"></small></form>