{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.xiaopingtou.cn//data/attach/topic/topicKPo7gB.jpg', '推荐 livekoko 的文章《float（浮动）模型》','https://www.xiaopingtou.net/article-58165.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
一、浮动元素会产生浮动流
所有产生了浮动流的元素，块级元素是看不到他们的（也就是说，块级元会认为浮动元素所占的位置是没有东西的，就会自动覆盖上去）；
而产生了BFC的元素和文本类属性的元素以及文本都能看到浮动元素； **也就是说产生浮动的元素对不同的其他元素的影响不同**
解释一下BFC： BFC :（Block Formatting Context） 直译为“块级格式化范围”。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器里的box的布局，与这个容器外的毫不相干；
如何触发一个盒子的BFC（四种方法）: 1、
为了解决上述问题（浮动对后继元素会有影响），有以下两种方法：
1、在父级的最有一个有浮动的子级后面添加一个
父级元素在没有设置固定宽高的情况下，其子元素如果添加了浮动元素，那么父级元素的空间是不会被子级元素撑开的
效果图：
如果在父级的最有一个有浮动的子级后面添加一个
style中添加：
效果图为：
可见，父级在逻辑上被撑开，那么这个方法在逻辑上是解决了问题的 但是不科学，因为添加元素改变了原本页面的结构；
2、利用伪元素来清除浮动
这种方法就要严谨一些了；伪元素是天生就存在的，存在于任意一个元素中，但是要用css来进行修改；并且它天生是inline元素
在此实例中，我们也可以这样修改css而不用添加
页面效果：
**补充** 凡是设置了
总结：有意识并且有效的清除浮动，可以为我们之后的编码减少很多不必要的问题；
而产生了BFC的元素和文本类属性的元素以及文本都能看到浮动元素； **也就是说产生浮动的元素对不同的其他元素的影响不同**
解释一下BFC： BFC :（Block Formatting Context） 直译为“块级格式化范围”。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器里的box的布局，与这个容器外的毫不相干；
如何触发一个盒子的BFC（四种方法）: 1、
position:absolute;
2、
display:inline-block;
3、
4、float:left;float:right;
overflow:hidden;
为了解决上述问题（浮动对后继元素会有影响），有以下两种方法：
1、在父级的最有一个有浮动的子级后面添加一个
元素，然后在
元素的css内加上clear:"both";来清除浮动；
父级元素在没有设置固定宽高的情况下，其子元素如果添加了浮动元素，那么父级元素的空间是不会被子级元素撑开的
清除浮动
效果图：
如果在父级的最有一个有浮动的子级后面添加一个
元素，然后在
元素的css内加上clear:"both";属性的话：
html中添加：
style中添加：
.clear{
clear: both;
}
效果图为：
可见，父级在逻辑上被撑开，那么这个方法在逻辑上是解决了问题的 但是不科学，因为添加元素改变了原本页面的结构；
2、利用伪元素来清除浮动
这种方法就要严谨一些了；伪元素是天生就存在的，存在于任意一个元素中，但是要用css来进行修改；并且它天生是inline元素
span::before{}
这是逻辑最前span::after{}这是逻辑最后在此实例中，我们也可以这样修改css而不用添加
元素来清除浮动：
.wrapper::after{
content: "";
clear: both;
display: block;
}
页面效果：
content:"";这一句是必须要有的，用来修改伪元素里面的内容；必须加这一句，伪元素才能生效；
clear:both;这个就是清除浮动啦；
display:block;因为能清除浮动的必须是块级元素，所以这一句也是必要的；**补充** 凡是设置了
position:absolute;float:left/right;的元素，系统自动从内部把元素转换成了inline-block；
总结：有意识并且有效的清除浮动，可以为我们之后的编码减少很多不必要的问题；