CS基础 float 浮动的使用方法 

html代码：
  <body>
        <div class='red'> </div>
        <div class='green'> </div>
        <div class='blue'> </div>
  </body>


浮动特点：
 1.使用浮动时会脱标，被脱标的物体会向上空飘去，不占用正常流的位置，
  此时用的是
         .green{
            float：right
            width:200px
            height:200px
            background-color：green;
             }；
   
2.浮动会比标准流高出半个级别，可以覆盖标准流中的元素
 此时使用的是
      .green{
            float：left；
            width:200px；
            height:200px；
            background-color：green;
             }；
          向左浮动
 此时，绿色盒子覆盖了蓝色盒子，是因为特点一，绿盒子在空中漂浮由于左边为最边缘，只能向自己的正向位置漂浮；蓝盒子按照正常流向前，所以蓝盒子才被覆盖在绿盒子之下

 

3.浮动找浮动，如果所有盒子都浮动的话，后一个浮动盒子将跟随前一个盒子按照标准流浮动
  css代码：
       div {
           float：left；  
       }

   同理，如果整体盒子想右浮动，排列顺序则是蓝、绿、红

4.浮动会受到上面元素的影响
因为第一个盒子本身，是一个块元素，独占一行的特点，导致盒子浮动后不能够到达自己应该到达的位置

 解决的方法：将第一个盒子转换为行内块元素即可，将不会受到影响

5.浮动之前，一行将可以显示多个元素  可以为行内元素设置宽、高
以span标签为例子：
     html结构
        <body>
             <span>span标签1 </span>
             <span> span标签2</span>
             <span> span标签3</span>
        </body>

 CSS样式 1.：浮动之前
       span{
          float:left;
          width：200px
          height:200px
          background-color:orange;

           }

 

   CSS样式 2.：浮动之后
       span{
          width：200px
          height:200px
          background-color:orange;

           }






注意：浮动元素不能通过text-align：center;和margin：0 auto，让浮动元素本身居中，但可以让其内容水平居中




 








            

            
posted @ 
2021-12-29 16:38 
嘉琦 
阅读(706) 
评论(0) 
 
收藏 
举报