CSS浮动float

参考教程（经验分享：CSS浮动(float,clear)通俗讲解）

首先了解一下标准文档流的排版：从上到下，从左到右，遇块换行

---

浮动能够理解为让某个div元素脱离文档流，漂浮在文档流之上

block元素无视float元素

啥意思呢，就是A和B两个block(块级)元素在排队买东西，A在前面，那么B只能遵照规则（标准文档流的遇块换行）忽然A膨胀了，飘了，而后B就无视A,前进一步跑到A下面。

下图就是这种状况。

​ but，若是此时A没有浮动，而B浮动了，此时他只漂浮在本身的位置上方。从俯视图看彷佛没有脱离文档流。

​

inline元素像流水同样围绕着float元素

行内元素会围绕着浮动的元素进行排列

清除浮动能够理解为打破横向排列。

​ 语法：

​ clear : none | left | right | both

​ 取值：

​ none : 默认值。容许两边均可以有浮动对象

​ left : 不容许左边有浮动对象

​ right : 不容许右边有浮动对象

​ both : 不容许有浮动对象

例子：

假如页面中只有两个元素div一、div2，它们都是左浮动，场景以下：

若是想要清除浮动，不少人在div1的CSS样式中添加clear:right;然而这样子是没有用的。

对于CSS的清除浮动(clear)，必定要牢记：这个规则只能影响使用清除的元素自己，不能影响其余元素。

因此在div2中CSS样式中添加clear:left;`

这时候才能够生效