清除浮动

给父元素设置宽高：

由于浮动后的元素脱离文档流，无法撑起父元素的宽高，可以设置父元素的宽高。

    

        
张三
        
李四
        
王麻子
    


    

        
天朗
        
气清
        
风和
    

CSS的clear属性：

给后面的盒子元素添加clear属性：
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)；
left: 不要找前面的左浮动元素；
right: 不要找前面的右浮动元素；
both: 不要找前面的左浮动元素和右浮动元素。

注意点:

当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效。

    

        
张三
        
李四
        
王麻子
    


    

        
天朗
        
气清
        
风和
    

隔墙法：

1. 外墙法：
2. 在两个盒子中间添加一个额外的块级元素；
3. 给这个额外添加的块级元素设置clear: both;属性。

    

        
张三
        
李四
        
王麻子
    



    

        
天朗
        
气清
        
风和
    

注意点:
外墙法它可以让第二个盒子使用margin-top属性；
外墙法不可以让第一个盒子使用margin-bottom属性。

2. 内墙法

1. 在第一个盒子中所有子元素最后添加一个额外的块级元素
2. 给这个额外添加的块级元素设置clear: both;属性

    

        
张三
        
李四
        
王麻子
    
 




    

        
天朗
        
气清
        
风和
    

注意点:
内墙法它可以让第二个盒子使用margin-top属性;
内墙法它可以让第一个盒子使用margin-bottom属性。
3.外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度。

伪元素选择器清除

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。
格式:
标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素；
标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素。

    
    
    



    
    我是文字
    

利用伪元素选择器清除浮动本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样。
注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

    
    
    



    
我是文字1
    
我是文字1
    
我是文字1


    
我是文字2
    
我是文字2
    
我是文字2

overflow:hidden

1. 可以将超出标签范围的内容裁剪掉;
2. 清除浮动;
3. 可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来。