float及清除

元素浮动 脱离文档流(不会对其他元素的布局造成影响)
但不脱离文本流 float本身就是做图文混排文字环绕效果的
对自身的影响:
-> 形成"块"(BFC) 可有自己的布局 如p1，若没有float 给文字设置宽高就是无效的
-> 位置尽量靠上
-> 位置尽量靠左float:left(右float:right) 宽度不够会往下掉
对兄弟元素的影响:
-> 上面贴非float元素
-> 旁边贴float元素
-> 不影响其他块级元素的位置
-> 影响其他块级元素的文本
对父级元素的影响:
-> 从父级布局上"消失"
-> 高度塌陷 解决这个问题 1.设置父元素变成BFC
2.其他非float元素超出float的区域 使用::after
设置content:'' height:0 display:block visibility: hidden clear:both
3.在父元素的最后加一个空的div

4.父级元素手动定义高度(高度固定时使用)
-->

    
    
    


   
    

        
            float
        
        
            好长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的字
        
    
    

        
            几个几个几个的字
        
        
            float
        
        
            float
        
    
    

如何清除浮动(浮动的元素不会占用父元素的布局空间，可能会对其他元素产生影响 比如父级塌陷等)
-> 让盒子负责自己的布局
-> 父元素overflow:hidden(auto)
-> ::after{clear:both}(页面最后空白元素)