【JS Web 前端知识库】14.说一下浮动？

14.说一下浮动？

得分点:

脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、overflow:hidden 、标签插入法

标准回答:

1. 浮动的作用:

设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

2. 设置浮动元素的特点：

① 设置了浮动，该元素脱标。
② 元素不占位置
③ 浮动可以进行模式转换（行内块元素）
④ 浮动造成的影响，使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。
⑤ 如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。

3. 清除浮动的方法：

① 伪元素清除浮动： 给浮动元素父级增加 .clearfix::after { content: ‘’; display:
table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; }
② 给浮动元素父级增加overflow：hidden属性
③ 额外标签法：给浮动元素父级增加标签

加分回答:

三种清除浮动的特点和影响 :
① 伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法
② overflow：hidden：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁
③ 标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用

💞💖💓💗每个时代，
✨🌟⭐️💫都悄悄犒赏会学习的人。