2021-08-05

---

Float：

定义元素朝哪个方向浮动。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、浮动的作用：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

二、使用方法：

1.属性值

不浮动CSS：

div{
	float: none;
}

向左浮动CSS：

div{
	float: left;
}

向右浮动CSS：

div{
	float: right;
}

继承父元素Float的属性CSS：

div{
	float: inherit;
}

2.使用场景：

1.几个div盒子同时在一行排列
2.想要让文字环绕排列（为它而生.）

3.浏览器支持：

所有主流浏览器都支持 float 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

二、清除方法：

额外标签法：在最后一个开启浮动的div添加一个div

添加的div样式中{
	clear：both;
}

overflow(给父亲添加)：

div{
	overflow:hidden;
}

使用after伪元素清楚浮动：

div:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hideen;
}

双伪元素清楚浮动：

div:before,
div:after{
	content:"";
	display:table;
}

---

总结

以上就是float有关的内容，内容比较简洁，应用案例容易讲模糊，希望大家多去实践，上述只给方法，关于float的应用场景非常多，希望大家积极去尝试。