添加浮动和对清除浮动方法的理解

 

写在前面

本篇文章是个人通过对CSS源文档的学习，阅读前辈的博客，以及个人在码代码的过程中的理解。

1.浮动的设计初衷

其实浮动的在设计之始只是为了进行图文混排查看官方文档，CSS3官网，后来码农们发现用来几个盒子并排显示有奇效，才逐渐发展为用来进行网页布局。
实例展示
加float:left;前后的效果


代码如下

可以很明显发现，添加浮动后蓝色框脱离了普通的文本流，相当于浮起来了，（这里需要注意的是，添加浮动后，无论之前是inline元素，亦或是block元素，都将转化为display:block元素 ） ， 黑色盒子就会忽略蓝色盒子往上移动，虽然浮动元素脱离了普通的文本流，但是会 占据body位子，因此文本就像被挤开了一样，最后环绕图片排列。

2.浮动可能造成的影响

1）影响后续布局（特别是行内元素）

浮动后相当于行内元素挨着排列，排不下后就换行排，有些时候就会出现这种情况，会沿着div4底端水平对齐，导致有个空白区域无法去掉。
2）父元素塌陷

当子元素全部浮动后，父元素内部没有内容去撑开，就会出现黑色框上下边框挨在一起，高度塌陷后，无法正常显示background-image，border等属性。

3.有浮动就要清除浮动

清除浮动或者解决父元素高度塌陷，影响后续布局的解决方案
1）给父元素设置高度（推荐指数：★ ★）
既然没了高度就人为设置一个
2）父元素浮动（推荐指数：0）
这种方法不推荐，都浮动后，不利于父级的布局。
3）display:inline-block（推荐指数：★ ★）
不采用float的方法，用行内元素布局，同样可以将多个盒子同行排列，但是会有一些不知所谓的边距。
后面3种方法则是采取清除浮动的方法
4）overflow：hidden；（推荐指数：★ ★★ ★）
overflow:hidden;
float：left;
// zoom:1用于兼容IE6。
其实主要是这两行代码在一起触发了一种浏览器默认机制BFC（(Block formatting context）直译为”块级格式化上下文”,想详细了解的同学请点击这里，个人觉得这个前辈讲的比较清楚。
5）设置clear:both；样式（推荐指数：★ ★★ ★）
在父元素末尾添加一个空盒子

其实他的机制就是clear:both的空盒子两边不能存在浮动元素，正常情况下，他是在其他浮动元素下面，会被遮挡，但是有了这个属性后，就会往下移动，直到不被浮动元素覆盖为止，它又和其他浮动元素在同一个父元素下面，父元素要包裹它，因此就被拉大了，高度自然就有了。
6）伪元素::after或者伪类:after（推荐指数：★ ★★ ★★）

给父级元素设置伪类，伪元素即可清除浮动，机制与上一种方法类似。

好了这就是目前我对浮动的理解，各位小伙伴如果发现有更好的理解，欢迎建议！

 

转载于:https://www.cnblogs.com/WTxiaomage/p/9649836.html