包裹浮动元素（float清除）

1.对于一个盒子里面有三个块元素，不浮动的效果是这样的
源代码

	<div class="box">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    
	<style type="text/css">
        .content {
    
    
            width: 100px;
            height: 100px;
            background-color: black;
            color: #fff;
            float: left;
        }
        
        .box {
    
    
            border: 2px solid red;
        }
        
	</style>

2.当给三个块元素添加了左浮动以后，会发现，盒子高度出现坍塌

解决办法
1.给大盒子添加伪类
可以看到坍塌问题解决了，盒子的宽度占满。

        .box::after {
    
    
            clear: both;/*清除浮动*/
            content: "";/*在伪类中必须存在的，不存在content则伪类不生效*/
            display: block;/*clear: both;只对块元素生效，而所有的伪类都是行元素*/
        }

2.将盒子也变成浮动元素（一般浮动流用于导航栏文字的排版，图片文字围绕）
最后坍塌问题解决，不一样的是，盒子的宽度是自适应的，并不占满。
或者将盒子变成绝对定位，效果也是一样的
原理
把盒子定义为
position: absolute;
float: left/right;
他会打内部把元素转换为display: inline-block;

变成浮动元素

	.box {
    
    
            border: 2px solid red;
            float: left;
        }

变成绝对定位

	.box {
    
    
            border: 2px solid red;
            position: absolute;
        }

3.但是如果只定义里面的块元素为display: inline-block;的话，效果不一样
为什么会不一样，那是因为inline-block元素中间只要有空格或回车就会出现空隙

	.content {
    
    
            width: 100px;
            height: 100px;
            background-color: black;
            color: #fff;
            display: inline-block;
        }

如何取消块元素里面的空隙呢。在父元素添加font-size: 0px;
但是他里面内容的字体大小变成0，所以里面的内容都会不见

	.box {
    
    
            border: 2px solid red;
            font-size: 0px;
        }