浮动盒子

CSS布局的三种机制”

网页布局的核心—用css来摆放盒子

为什么要用浮动

1. 可以让多个盒子排成一行并且没有缝隙。（margin设置成负数也可以实现，但是又要调试又要设置div为inline-block）
2. 可以实现盒子的左右浮动（同上，margin也可以，但是很麻烦）

什么是浮动

浮动可以让元素：

1. 脱离便准普通流的控制（可以压在标准流的上面）
2. 移动到指定位置
   

因为没有设置width，此时这个盒子会根据文字多少来浮动

如果此时我们设置文字为：”天王盖地虎“：显示为

如果此时我们设置文字为：”天王盖地虎，小鸡炖蘑菇“：显示为

此时我们知道float属性让其成为根据文字多少来浮动。

如果我们设置：

此时便可以实现没有缝隙的相邻效果：

同理左右，让three设置成right即可

漏的特点举例：浮动的盒子不占有位置，它的位置给了标准流的普通盒子

	<style>	
		.kid2{
            width: 5000px;
            height: 200px;
            background-color: pink;
        }

		.kid{
            width: 200px;
            height: 200px;
            float: left;
            background-color: red;
        }
        
    </style>


 <div class="kid">子元素1</div>
 <div class="kid2">子元素2</div>

结果如下：

这时候我们知道红色的区域为什么没有在粉色下面是因为粉色是浮动的，不再占位置，此时红色则会取代黄色，先把自己全部大小的位置占了，才显示粉色。

值得注意的是：如果我们设置粉色跟红色一样大小，那么粉色标签数字将会显示在红色下面，为的是提醒一下下面还压着一个浮动属性的盒子
例如：

<style>	
		.kid2{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

		.kid{
            width: 200px;
            height: 200px;
            float: left;
            background-color: red;
        }
        
    </style>


 <div class="kid">子元素1</div>
 <div class="kid2">子元素2</div>

运行结果为：

float的应用

浮动应当要注意搭配，因为会影响到标准流元素，所以应该给浮动元素加一个标准流的父亲，避免这样的情况。

清除浮动

清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题，清除浮动后，父级会根据浮动的子盒子自动检测高度，因为父级有了高度，就不会影响下面的标准流

清除浮动的方法：

1. （额外标签法）
   在浮动标签的最后一个标签后面再创建一个标签，写：clear： both;
   
   例如：
   

2. 给父级元素添加overflow
   父级元素里加一句：overflow：hidden即可。（但是貌似框框还是会多出一点）
   

3. 父级添加after伪元素
   在父级元素中添加以下代码即可（目前不懂什么意思）

.clearfix:after{
	conten: "";//内容为空
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}

.clearfix{
	*zoom: 1;//ie6,7，专门清除浮动的样式，即为了兼容性
}

4. 父级添加双伪元素方式
   在父级加上下面代码（同样也是目前不知道什么意思）

.clearfix:before,
.clearfix:after{
	conten: "";//伪元素一定要写的
	display: table;
}
.clearfix:after{
	clear: both;
}

.clearfix{
	*zoom: 1;//ie6,7，专门清除浮动的样式，即为了兼容性
}