front-end CSS(5) 浮动与清除浮动

传统网页布局的3种方式

也就是盒子如何排列，实际开发中，一个页面以下3种都会用到。

• 标准
• 浮动
• 定位

标准

标签按照默认的方式进行排列

• 块元素独占一行，从上到下进行排列
• 行内元素从左到右排列，碰到父元素边缘自动换行

浮动

div {
	float: none | left | right;
}

如何实现2个div并排？

  <div class="left">left</div>
  <div class="right">right</div>

可以使用display：inline-block；但是中间多了一个空白空隙。不好控制。

.left,
.right {
	float: left;
}

如何实现2个盒子分别在左上角和右上角？

.left {
	float: left;
}
 .right {
	float: right;
 }

元素添加浮动后的特性

1. 脱离标准流，不再保留原来的位置

<div class="div01">div01</div>
<div class="div02">div02</div>
    <style>
        .div01 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            float: left; 【浮动第一个div】
        }
        .div02 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

2. 多个div设置了浮动，根据上边沿对齐
浮动的元素是紧紧挨在一起的，中间不会有空隙。
如果父元素装不下这些浮动元素了，多出的盒子会另起一行对齐。

3. 任何元素都可以浮动，加了浮动后会具有类似行内块的特性
如果行内元素有了浮动，那么不需要设置display，直接设置高度和宽度会有效。
如果不设置宽度，那么这个盒子的宽度=里面内容的多少。【行内块元素特性】

浮动常与标准流一起使用

标准流，上下排列父元素。
浮动，左右排列子元素。
而且，其中一个盒子浮动了，其它的兄弟盒子也应该一起浮动。
浮动的盒子只影响后面的标准流，不影响前面的。----也就是说，第2个盒子设置了浮动，不影响第一个没设置浮动的盒子，只会影响第3个盒子。

常见的网页布局

清除浮动造成的影响

什么叫清除浮动？
就是浮动元素脱离标准流后造成的影响
原理
理想情况下，父元素的高度应该由子元素撑开，而不是直接给父元素一个高度。
但是子元素一旦浮动，父元素就失去高度，会变成0。当父级盒子高度=0，就会影响下面的标准流盒子。

• 如果父元素有高度，则不需要清除浮动
• 清除浮动后，父元素的高度将由子元素决定。

使用下面这个代码可以闭合浮动【让浮动只在父盒子内部进行影响，不影响父盒子外的其它元素】：

 clear: left | right | both;
 在实际开发中，几乎只用 clear: both;

清除浮动的4种方法：

1. 额外标签法：
在全部的子元素后面增加一个空白盒子，相当于一堵墙，把所有子元素都关在了父盒子里。

<style>
.child{
	float: left;
   	}
.clear {
	clear: both;
	}
</style>
<div class="father">
	<div class="child"></div>
	<div class="child"></div>
	<div class="clear"></div>
</div>

缺点：需要增加额外的无意义标签，结构变差。另外这个新增的额外的标签必须是块元素。

2. 给父元素添加overflow

overflow: hidden;

缺点： 无法显示溢出的部分。

3. 给父盒子增加 :after伪元素
其实就是第一种方法----额外标签法的升级版本。不在HTML里增加一个无意义的div，而是通过CSS设置一个空白的块元素：

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{ /* IE6,7 特有*/
	*zoom: 1;
}

优点：
没有增加标签，结构更简单。
缺点是需要照顾低版本浏览器。
代表网站：淘宝、百度、网易。

4. 双伪元素清除浮动:after, :before
相当于在子元素前后都建立了一堵墙。

.clearfix:before,
:after {
	content: "";
	display: table;
}
.clearfix:after { 
	clear: both;
}
.clearfix{ /* IE6,7 特有*/
	*zoom: 1;
}

优点：代码更简洁
缺点：需要照顾低版本的浏览器
代表网站：小米，腾讯等。