浮动

float: 属性值;

属性值	作用
none	不浮动（默认）
left	左浮动
right	右浮动

1. 浮动会脱离标准流
2. 实现浮动的元素会自动顶部对齐
3. 实现浮动的元素具有行内块元素的特性（无论元素是行内元素还是块元素）
4. 浮动简称脱标
5. 浮动元素会压住标准流的盒子，但是不会压住标准流里面的文字和图片
6. 如果盒子既有 left又有 right 属性，则先 left 后 right，同理，先 top 后 bottom

注意点❗❗❗

• 浮动元素不会保留原来标准流时的位置
• 浮动元素无法占用前面标准流元素的位置
• 标准流元素会占用前面浮动元素原来的位置

总结：浮动元素只会影响后面标准流的位置，但不会影响前面标准流的位置

如果多个元素都设置有浮动，那么这些元素都会在一行显示，并且没有间距，如果父级元素的宽度装不下这些浮动元素，多出来的元素则另起一行对齐（另起一行的元素也是没有间距的）

---

清除浮动

clear: 属性值;

属性值	作用
left	清除左浮动
right	清除有浮动
both	清除左右浮动

清除浮动的策略为闭合浮动，就是限制浮动的元素在某个范围内浮动（比如只能在父类标签内浮动，不能超出父类标签）

清除浮动的四种方法：

1. 额外标签法，也称隔墙法（W3C推荐）
2. 给父级标签添加overflow属性
3. 给父级标签添加:after属性
4. 给父级标签添加双伪元素

---

after清除浮动

优缺点：

优点：不用添加标签，结构简单

缺点：需要照顾低版本的浏览器

代表网站：百度，网易，淘宝

/* :after样式会在设置的元素 后 面添加一个行内元素 */
.clearfix::after {
    content: "";
    /* 将添加的行内元素转换为块元素 */
    display: block;
    height: 0;
    /* 清除浮动 */
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* 为了兼容低版本浏览器，让低版本浏览器也能正常的清除浮动 */
    *zoom: 1;
}


.x {
	width: 710px;
	border: 1px solid red;
}            

.a {
	float: left;
	width: 100px;
	height: 200px;
	background-color: pink;
}

.b {
	float: left;
	width: 200px;
	height: 100px;
	background-color: orchid;
}

.c {
	float: left;
	width: 400px;
	height: 500px;
	background-color: orange;
}

<!-- 设置类名x和clearfix，类名与类名之间要有空格隔开 -->
<div class="x clearfix">
	<div class="a">1</div>
	<div class="b">2</div>
	<div class="c">3</div>
</div>

---

双伪元素清除浮动

优缺点：

优点：代码简洁

缺点：需要照顾低版本的浏览器

代表网站：小米，腾讯

/* :before样式会在设置的元素 前 面添加一个行内元素 */
/* :after样式会在设置的元素 后 面添加一个行内元素 */
.clearfix::before,
.clearfix::after {
    content: "";
    /* 将添加的行内元素转换为表格 */
    display: table;
}
.clearfix::after {
    /* 清除浮动 */
    clear: both;
}
.clearfix {
    /* 为了兼容低版本浏览器，让低版本浏览器也能正常的清除浮动 */
    *zoom: 1;
}


.x {
	width: 710px;
	border: 1px solid red;
}            

.a {
	float: left;
	width: 100px;
	height: 200px;
	background-color: pink;
}

.b {
	float: left;
	width: 200px;
	height: 100px;
	background-color: orchid;
}

.c {
	float: left;
	width: 400px;
	height: 500px;
	background-color: orange;
}

<!-- 设置类名x和clearfix，类名与类名之间要有空格隔开 -->
<div class="x clearfix">
	<div class="a">1</div>
	<div class="b">2</div>
	<div class="c">3</div>
</div>

---

overflow清除浮动

给父标签设置样式 overflow

该标签有三个属性：hidden、auto和 scroll

该方法的优缺点：

• 优点：代码简洁
• 缺点：盒子溢出的部分无法显示

.x {
	width: 710px;
	border: 1px solid red;
    /* overflow清除浮动 */
    overflow: hidden;
}            

.a {
	float: left;
	width: 100px;
	height: 200px;
	background-color: pink;
}

.b {
	float: left;
	width: 200px;
	height: 100px;
	background-color: orchid;
}

.c {
	float: left;
	width: 400px;
	height: 500px;
	background-color: orange;
}

<div class="x">
	<div class="a">1</div>
	<div class="b">2</div>
	<div class="c">3</div>
</div>

---

额外标签法（不常用）

在末尾添加一个空的块元素（不能为行内元素），并给该元素设置样式 clear: both;

.x {
	width: 710px;
	border: 1px solid red;
}  

.a {
	float: left;
	width: 100px;
	height: 200px;
	background-color: pink;
}

.b {
	float: left;
	width: 200px;
	height: 100px;
	background-color: orchid;
}

.c {
	float: left;
	width: 400px;
	height: 500px;
	background-color: orange;
}

<div class="x">
	<div class="a">1</div>
	<div class="b">2</div>
	<div class="c">3</div>
	<!-- 额外标签法 -->
	<div style="clear: both;"></div>
</div>

清除浮动后，父标签会更具浮动的子标签高度来变化自己的高度