‘壹’ 前端网页开发中清除浮动什么情况下才用到
先了解“清除浮动”的概念是什么，它指的是子元素浮动导致父元素高度的塌陷，由于浮动元素是脱离文本流的，所以页面渲染计算父元素高度的时候没有把浮动元素的高度计算进来；举一个例子：
<divstyle="border:1pxsolidred;">
这是一个例子这是一个例子这是一个例子这是一个例子这是一个例子这是一个例子这是一个例子这是一个例子这是一个例子这是一个例子这是一个例子<imgsrc="img.jpg"style="float:right;height:100px;">
</div>
运行从上面的代码，你可以看到图片超出父元素的红边框范围，而且无论图片高度怎么改变，都对红框高度没有产生任何影响，这就是浮动造成的父元素高度塌陷，这时如果你想让父元素的高度自适应地随着图片的高度变化而变化，让图片始终处于红框内，你就可以使用清除浮动了
‘贰’ 第五篇：web之前端之float的几种清除浮动方式
清除浮动：clear:both；
父级div定义 overflow: auto
‘叁’ web前端程序员必看之浮动布局与弹性布局的区别
Web页面布局技术主要css2.0中主要出现了浮动布局与定位，以及css3中新的布局方式弹性布局。
对于web页面布局史中，浮动与定位统治了所有页面的布局。定位有不可替代的优点，主要的优点是可以实现多层级结构，且子元素的位置不局限于父元素的范围内。
浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题，但是也会有非常不好的影响。
影响一，浮动元素会脱离文档流，使用浮动技术后，还要清除浮动的影响。
图1：元素浮动
图2：清除浮动
影响二，在多个块元素共存于一行后，在块元素的宽度无法达到父元素的宽度时，为了美观，会采用等距分隔或等距环绕设计。对于这样的设计，则需要人为的，精确的计算块元素的外边距。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
图3：精确计算实现等距分隔
由于浮动技术有很多的缺点，所以将会受到很大的冲击，它的对手将是弹性布局。弹性布局主要作用是，设置父元素内的多个块元素的排列顺序以及分布方式。
弹性布局与浮动相比，不但可以实现多个块元素共存于一行，而且对父元素没有不好的影响，同时实现子元素等距分隔，或等距环绕并不需要人为的计算。弹性布局会自动计算。
图4：弹性布局
图5：实现等距离分隔
结束语：
望此文成为一盏明灯，指引你们来时的路。
‘肆’ 前端浮动有哪些方法
浮动只有一种：float: left/right/top/left;
但是实现浮动的效果有很多种：
1、float 浮动
2、flex
3、position 定位
4、display
‘伍’ web前端面试之浮动（码动未来）
web前端面试之浮动（码动未来）
1.3.1、iframe有那些缺点？
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
1.3.2、Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
1.3.3、 HTML5的form如何关闭自动完成功能？
给不想要提示的form或某个 input 设置为 autocomplete=off。
1.3.4、 title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。
i内容展示为斜体，em表示强调的文本；
Physical Style Elements --自然样式标签
b, i, u, s, pre
Semantic Style Elements --语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签,但不能滥用, 如果不能确定时首选使用自然样式标签。
1.3.5、 解释下浮动和它的工作原理。
关于浮动我们需要了解，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。要想使元素浮动，必须为元素设置一个宽度（width）。虽然浮动元素不是文档流之中，但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样，下面的元素填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素所遮盖，对内联元素进行定位时，这些元素会考虑浮动元素的边界，会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素，而内联元素会关注浮动元素的。
1.3.6、 列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。
2.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，content属性的值设为”.”，空亦是可以的。
4.浮动外部元素
此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。
QQ技术交流群:815302226
‘陆’ html5 如果给父元素设置了浮动,他的子元素会跟着它一起提升一个层次吗
子元素会保持原来在父级的显示方式，但是会跟随父级浮动到对应位置。
在前端中，父级的 浮动、定位都是不能够继承。
‘柒’ H5前端浮动问题
给两个ul都设置浮动，然后给他类名为content的父级设置清除浮动，像你这样的可以设置一个浮左一个浮右
‘捌’ web前端如果父级和子级都加了浮动会有什么现象
在WEB前端当中，如果针对元素进行了浮动的设置，则该元素会脱离文档流而存在，会引起父级元素的塌陷，同时会对同一级别的元素造成布局上的影响。
但是，当为父级元素也设置了浮动之后，父级元素也脱离文档流，父级元素和子级元素都属于浮动元素，此时，父级元素高度塌陷的问题反而会被解决（即：另一个元素的父级元素浮动，是针对该子级元素清浮动的一种方法），但是由于父级元素发生浮动，父级元素的兄弟级元素以及父级元素的父级元素，依旧会受到布局的影响。
如果是清除浮动，可以使用多种方法来实现，最为推荐的其实是after伪元素清浮动，会更好用，也是当前WEB前端开发当中最为主流的一种清除浮动方法
‘玖’ Web前端基础】css中浮动属性有什么
float right none(不浮动) inherit从父元素继承浮动的属性值