Css - float布局

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位 相反）。

float取值	描述
left	往左浮动
right	往右浮动
none	不浮动
inline-start	表明元素必须浮动在其所在块容器的开始一侧
inline-end	表明元素必须浮动在其所在块容器的结束一侧

1. 浮动布局下会把行内元素转化为块级元素

    
        
        
        
    
    
        

            hello world
        
    

• 本来不能设置宽高的行内元素span在用了浮动后可以设置宽高了。
  

2. 浮动会将元素脱离文档流

    
        
        
        
    
    
        

            我向左浮动了
            
我没有浮动
        
    

• span向左浮动，p没有浮动。
• span脱离了文档流，所以后面的p摆放时忽略了span，但是文本还是会环绕在span外面。

如何清除浮动？

场景：

    
        
        
        
    
    
        

            

            

        
        
hello world
    

因为浮动脱离文档流，父容器的高度塌陷。

1. clear:both清除所有浮动（注意需要block元素clear:both才有效）

• 伪元素+clear:both

    
        
        
        
    
    
        

            

            

        
        
hello world
    

• 额外空标签+clear:both

    
        
        
        
    
    
        

            

            

            

        
        
hello world
    

2. 父容器overflow:hidden，触发BFC

    
        
        
        
    
    
        

            

            

        
        
hello world
    

清除浮动后效果：