css定位篇-float浮动

浮动主要有两种用法：

• 实现一种环绕效果
• 页面布局

环绕效果

  
文本环绕图片
  

    
  sdaf sdafh sdaf lsadfh saldfh lasdf asdf alshdf sdaf sdaf sdafh sda flhsadf  sadfh asdlfh asdlf ahsdf asldfh sadf sadfas dflsda fsadfl sadf adsf sdfa lasdf hadsf sdaf sdaflas dfas dfa sdfhasd fa sdfalsdf sad slkadfn asdfl adsfhl fds fashfjkdas fsa df asflsa dflsdah sadhfa sdflchsdajhfshdfwheiuuisdlkjahfuiw sdaflhsd sdafh sdal sadflsd fasdhlf d asdfhlsd jhweiuhiunsweqhpjdslkh f

页面布局

  

    

      
第一个
      
第二个
      
第三个
      
第四个
    
  
  
  

    
第一个片段,设置外左边距离,让它给导航留出空间
    
浮动具有继承特性，所以在浮动元素后的元素都按照统一方式浮动
  

  

    
第二个片段,也是按照左边浮动的额
  

image.png

浮动产生的问题1：清除浮动

前面的浮动会导致后面的元素受到影响（也成为浮动的）,如果后面我们不希望它继续浮动，可以清除掉

  

    左浮动
  

  

    未清除浮动时
  

image.png

  

    左浮动
  

  

    清除浮动后
  

image.png

浮动产生问题2：环绕图片超出外盒子

  

    

      
       sad sadfh  asdfhl asdhf asldfh asdlhf asdfhl sdafhsa dfhlsdaf asdhfasd flhasdf asdf saldfh dsf asldf sadf sadlhf sadflhsda flsd fasdhfsd afhasldf ds fasdhlf asdfhlasldf asldf sdafhlas dfasdfhasd fd asdfl sdafhlas dfasdl dsf asf das ldfhs dfa sdsd sa
    
  

Snip20180617_14.png

修复如下：

  

    

      
       sad sadfh  asdfhl asdhf asldfh asdlhf asdfhl sdafhsa dfhlsdaf asdhfasd flhasdf asdf saldfh dsf asldf sadf sadlhf sadflhsda flsd fasdhfsd afhasldf ds fasdhlf asdfhlasldf asldf sdafhlas dfasdfhasd fd asdfl sdafhlas dfasdl dsf asf das ldfhs dfa sdsd sa
    
  

image.png