html(9)浮动与清除浮动,CSS浮动与清除浮动

《CSS浮动(float,clear)通俗讲解》在读这篇文章之前我脑海中有无数关于浮动的问题 😵

浮动是什么？浮动从何何来？浮动会产生什么副作用？为什么要清除浮动？用什么方法清除浮动？……

因为之前学习的时候发现元素浮动后跑来跑去，学的很抓狂，今天读了这篇文章，感动的一批，茅塞顿开，感谢大佬：

以下是看过某些大佬文章后记录一些我认为的要点，及自己的想法。

首先清楚一个原则：

浮动最初出现的意义其实只是用来让文字环绕图片而已，仅此而已.而我们目前用浮动实现页面布局本不是浮动该干的事情。

之所以用来浮动来布局，是因为标准流已经无法满足需求-->可能会有脑洞大开的小可爱会想让多个块级元素显示在同一行，这样类似的需求

在标准流中html元素排列规则

自上而下排列，行内元素共用行，块级元素独占一行。

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

可以理解为：给div(或其他块级元素)设置浮动后，它将不再在标准流中，此时它开辟了自己的流世界--我给他取个小名“漂浮流”(ps. 浮动是漂浮在标准流之上，因此可能会出现浮动元素挡住标准流中的元素)。而处于标准流中的元素会重新按照规则，自动上移，组成新的标准流。

“漂浮流”中元素排列规则

关于元素浮动后呆在哪？

一个重要结论：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前，远离页面边缘的一端是后。

--

读完上面，无论怎么浮动，浮动的踪迹我们已经了如指掌了，哈哈哈哈

为什么会有清除浮动呢？

经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

清除浮动可以理解为打破横向排列。

语法：

​ clear : none | left | right | both

​ 取值：

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

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

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

​ both : 不允许有浮动对象

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

理解为对自己的自我要求，想要自己不被别人的浮动所影响(即还占原来位置)，就给自己设置 clear:both；这里的原来位置可以自己实际测试。🙃

关于overflow:hidden;和clear:both;

经历了上面的分析后，我们很很容易理解clear:both;是用于清除兄弟元素浮动对我产生的影响;overflow:hidden;除了可以用于超出某一区块的内容隐藏外，还可以用于清除子元素浮动对父元素产生的影响-->一般在父元素没有设置高度的情况下，子元素浮动的话，父元素高度会塌陷。设置了overflow:hidden;后就不会塌陷啦。