css布局—清除浮动的影响

浮动存在的问题
①浮动的元素不能撑高父亲，高度不能自适应
②浮动的元素会影响后面浮动的元素
例：

    

        
1
        
2
        
3
        
4
    
    

        
5
        
6
        
7
    
    .box{
        width:1000px;
        border: 5px solid #000;
        margin-bottom: 10px;
    }
    .box p{
        width:100px;
        height: 100px;
        margin-right: 10px;
        background-color: pink;
        float: left;
    }

效果：

clipboard.png

……………………………………………………………………………………
清除浮动的影响
①给父盒子设置高度
例：

.box{
    width:1000px;
    height: 120px;
    border: 5px solid #000;
    margin-bottom: 10px;
    }

效果：

clipboard.png

解决：对后面浮动的元素的影响；margin可以生效
没解决：高度不能自适应

②给后面浮动的元素加clear属性
clear：清除浮动的影响
属性值：
left：清除左浮动的影响
right：清除右浮动的影响
both：清除左右浮动的影响
例：

    

        
1
        
2
        
3
        
4
    
    

        
5
        
6
        
7
    
    div{
        width:1000px;
        /*height: 120px;*/
        border: 5px solid #000;
        margin-bottom: 10px;
    }
    div p{
        width:100px;
        height: 100px;
        margin-right: 10px;
        background-color: pink;
        float: left;
        }
    .box2{
        clear: both;
        }

效果：

clipboard.png

解决：对后面浮动的元素的影响
没解决：高度不能自适应；margin不能生效（盒子有高度或者margin值比盒子还大才能生效）

③外墙法
隔墙法有两种，分别是外墙法和内墙法。
外墙法：在两个父盒子之间加一堵有高度、清除了浮动的墙。
例：

    

        
1
        
2
        
3
        
4
    
    

    

        
5
        
6
        
7
    
div{
        width:1000px;
        /*height: 120px;*/
        border: 5px solid #000;
        margin-bottom: 10px;
        }
    div p{
        width:100px;
        height: 100px;
        margin-right: 10px;
        background-color: pink;
        float: left;
        }
    /*.box2{
        clear: both;
        }*/
    .cl{
        height: 10px;
        clear: both;
        border:none;
        }

效果：

clipboard.png

解决：对后面浮动的元素的影响，视觉上有了间距。
没解决：高度不能自适应；margin不能生效

④内墙法
在浮动的元素最后面加一堵清除了浮动的墙。
例：

    

        
1
        
2
        
3
        
4
        

    
    
    

        
5
        
6
        
7
        

    
div{
        width:1000px;
        /*height: 120px;*/
        border: 5px solid #000;
        margin-bottom: 10px;
        }
    div p{
        width:100px;
        height: 100px;
        margin-right: 10px;
        background-color: pink;
        float: left;
        }
        /*.box2{
            clear: both;
        }*/
    .cl{
        clear: both;
        border:none;
        }

效果：

clipboard.png

解决：高度自适应，对后面浮动元素的影响，margin失效。
虽然解决了所有问题，但是不使用这个方法；因为页面上增加了很多无意义的标签div.cl。

⑤overflow:hidden
overflow：溢出处理方法。
属性值：
auto：溢出滚动
hidden：溢出隐藏
例：

    
开头我问问无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无 无无无无无无无无呜呜无无无无无无无无无无无无

div{
    width:100px;
    height: 120px;
    border: 5px solid #000;
    padding: 5px;
    overflow: auto;
    }
div p{
    font-size: 12px;
    line-height:20px;
    }

效果：

clipboard.png

overflow:auto; 溢出滚动。当文字内容超过盒子的高度时，会出现滚动条，拉动滚动条可以查看全部文字。

例：

div{
    width:100px;
    height: 120px;
    border: 5px solid #000;
    padding: 5px;
    overflow: hidden;
    }
div p{
    font-size: 12px;
    line-height:20px;
    }

效果：

clipboard.png

overflow:hidden; 溢出隐藏。当文字内容超过盒子的高度时，超过border的部分会被隐藏。（当盒子有padding时，下padding不会隐藏文字，超过border的部分才会被隐藏）

overflow：hidden可以解决浮动的影响。
例：

    
1
    
2
    
3
    
4


    
5
    
6
    
7

div{
    width:1000px;
    border: 5px solid #000;
    margin-bottom: 10px;
    overflow: hidden;
    }
div p{
    width:100px;
    height: 100px;
    margin-right: 10px;
    background-color: pink;
    float: left;
    }

效果：

clipboard.png

解决：解决了所有的问题，同时没有增加任何标签。

overflow:hidden;有两个引申含义：
①强制让父盒子去检测子盒子的高度，将检测的子盒子的高度自动撑开自己的高度；（只要看到盒子高度自适应，只需要给父盒子加overflow:hidden;）
②强制检测子盒子的浮动，让父盒子强制管理住自己的浮动的子盒子，不让子盒子影响别人同时也不让别人影响自己。