【前端初学笔记—浮动】

---

一、浮动定义

1.浮动定义

元素脱离文档流，按照指定方向发生移动，遇到父级边界换行。

2. 浮动取值

（1）不浮动：float: none;
（2）左浮动：float: left;
（3）右浮动：float: right;
（4）继承父级：float: inherit;

3. 浮动的作用

浮动是为了解决水平布局问题，直观看来只要是需要让多个元素都并排排列的就可以用浮动。

4.浮动的特性

（1）所有标签同排显示；
（2）行标签支持所有css样式；
（3）默认内容撑开宽高；
（4）元素脱离文档流。

二、清除浮动

1.产生原因

清除浮动的原因是因为元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开。

2.解决办法

（1）可在父级使用height属性，缺点是拓展性不太好，治标不治本；
（2）使用overflow清除浮动，overflow是一个属性，本来用来处理内容溢出的，但这里可以用来清除浮动。

使用时直接在css样式表对使用了浮动元素的父级元素添加overflow属性，例如：

.father {
	overflow:hidden;
}

注意：overflow这种解决办法会隐藏超出范围的元素，需视情况而定。

（3）使用一个clearfix的class来清除。（推荐使用）

首先在使用了浮动的父级元素内添加类名为clearfix的类：

<div class="clearfix">
        父级
</div>

然后再在CSS中添加样式：

.clearfix:after{content:' ';overflow:hidden;display:block;clear:both}
.clearfix{zoom:1}

---

如果以上知识对你有用欢迎点赞和关注~ 谢谢~

---