解决高度塌陷和显示隐藏

87 阅读1分钟

高度塌陷

高度塌陷:子元素设置浮动,父元素未设置高度,父元素高度将消失,引起页面布局混乱

清除浮动(解决高度塌陷的办法):

    1:给父元素添加高度
    缺点:不灵活
    
    2:给父元素添加oerflow:hidden; 
    缺点:内容超出父元素时,会被隐藏
    
    3:给浮动子元素最后添加一个块级 兄弟元素,并设置clear:left; left right both
    缺点:代码冗余
    
    4:万能清除法
        clear_ fix:after{
        content:" .”;
        display:block;
        clear: both; 
        width:0;
        height:0;
        overflow:hidden;/*超出隐藏*/
        visibility:hidden;/*隐藏本身*/
        
visibility和hidden:显示隐藏;
    visible显示(默认值)
    hidden隐藏(占据文档流)
    visibility:hidden;和display:none的区别
        都是对元素的隐藏
        前者占据文档流,后者脱离文档流