从三个方面回答：1、浮动的作用：常用于图片，可以实现文字环绕图片。2、浮动的特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列。3、解决塌陷问题：流行用法：父元素中添加overflow:hidden、给父元素添加高度、建立空白标签
添加clear、或者在父级添加伪元素::after{content:'',clear:both,display:table}。
发表于 2022-05-17 17:25:28
回复(4)
浮动： 左浮动：float：left 右浮动：float：right 浮动的特点：脱离文档流，可能会造成浮动的塌陷 三行结构不方便进行页面排版 如何解决浮动的塌陷：1.给父级添加高度 2.给父级添加overflow：hidden 3.创建一个空白div,添加clear：both 属性 4.添加一个after伪类 ：：after{content:" "; width:" "; height:" "; display:block;overflow:hidden;visibility:hidden;clear:both;zoom:1}
编辑于 2022-04-27 22:50:09
回复(0)
包括左浮动，右浮动 设置浮动会脱离文档流，当父元素不设高度需要子元素来撑开，而子元素设置浮动就会导致父元素的高度塌陷 解决塌陷： 1.给父元素设置高度 2.给父元素设置overflow：hidden 3.在下方创建一个空白div，添加样式clear：both 4.父级添加after伪类 father：：after{ content：''； display：table； clear：both }
发表于 2022-05-03 10:26:15
回复(1)
排一下版 得分点 脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、`overflow:hidden` 、标签插入法 标准回答 ①浮动的作用，设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。 ②设置浮动元素的特点： -设置了浮动，该元素脱标。元素不占位置 -浮动可以进行模式转换（行内块元素） 浮动造成的影响，使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。 ③清除浮动的方法： -伪元素清除浮动：给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; } overflow：hidden`：给浮动元素父级增加`overflow：hidden`属性 额外标签法：给浮动元素父级增加标签 ④加分回答 三种清除浮动的特点和影响 -伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法 -`overflow：hidden`：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁 -标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用
发表于 2022-05-26 17:37:56
回复(0)
排版 浮动的作用，设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。
浮动特点:脱离文档流，盒子塌陷，影响其他元素排版
解决塌陷：
1.给父元素设置高度
2.给父元素设置overflow：hidden
3.在下方创建一个空白div，添加样式clear：both
4.父级添加after伪类 father：：after{ content：''； display：table； clear：both }
除浮动的方法：
-伪元素清除浮动：给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; } overflow：hidden`： 给浮动元素父级增加`overflow：hidden`属性 给浮动元素父级增加标签
浮动特点:脱离文档流，盒子塌陷，影响其他元素排版
解决塌陷：
1.给父元素设置高度
2.给父元素设置overflow：hidden
3.在下方创建一个空白div，添加样式clear：both
4.父级添加after伪类 father：：after{ content：''； display：table； clear：both }
除浮动的方法：
-伪元素清除浮动：给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; } overflow：hidden`： 给浮动元素父级增加`overflow：hidden`属性 给浮动元素父级增加标签
编辑于 2022-07-30 17:23:14
回复(0)
浮动：脱离文本流，可能会造成高度塌陷，解决高度塌陷的方法：1.父元素设置overflow：hidden2，复元素设置高度，3.增加一个空的div，设置clear：both
发表于 2022-05-12 23:00:46
回复(1)
float浮动会使盒子脱离文档流，影响其他元素排版。清除浮动的方法：1.额外标签法（隔墙法）：在最后一个浮动标签后添加一个标签，给其设置clear:both，如果清除了浮动父元素自动检测盒子最高的高度，然后与其同高。2.父元素添加overflow属性，overflow: hidden。3.父级添加after伪元素（推荐做法）。4.父级添加before和after双伪元素。
发表于 2022-05-19 17:17:36
回复(0)
【得分点】 ：脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、`overflow:hidden` 、标签插入法
【标准回答】:
①浮动的作用，设置浮动的图片，可以实现文字环绕图片；设置了浮动的块级元素可以排列在同一行；设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。
②设置浮动元素的特点：
-设置了浮动，该元素脱标。元素不占位置
-浮动可以进行模式转换（行内块元素）
③浮动造成的影响：使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。
④清除浮动的方法：
-伪元素清除浮动：给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; } overflow：hidden`
-给浮动元素父级增加`overflow：hidden`属性
-额外标签法：给浮动元素父级增加标签
⑤加分回答
三种清除浮动的特点和影响
-伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法
-`overflow：hidden`：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁
-标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用
【标准回答】:
①浮动的作用，设置浮动的图片，可以实现文字环绕图片；设置了浮动的块级元素可以排列在同一行；设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。
②设置浮动元素的特点：
-设置了浮动，该元素脱标。元素不占位置
-浮动可以进行模式转换（行内块元素）
③浮动造成的影响：使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。
④清除浮动的方法：
-伪元素清除浮动：给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; } overflow：hidden`
-给浮动元素父级增加`overflow：hidden`属性
-额外标签法：给浮动元素父级增加标签
⑤加分回答
三种清除浮动的特点和影响
-伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法
-`overflow：hidden`：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁
-标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用
发表于 2023-04-24 17:49:04
回复(1)
【概念介绍】
CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
【浮动特点】
1、浮动包括左浮动和右浮动，一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2、浮动元素会脱离文档流但不会脱离文本流，（当浮动时其不会影响周围的盒子模型，但是文字会环绕在浮动元素周围，可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层。）
3、脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
4、当父元素不设高度需要子元素来撑开，而子元素设置浮动就会导致父元素的高度塌陷
【解决高度塌陷】
1.给父级添加高度
2.给父级添加overflow：hidden
3.创建一个空白div,添加clear：both 属性
4.添加一个after伪类::after{content:" "; width:" "; height:" ";display:block;overflow:hidden;visibility:hidden;clear:both;zoom:1}
CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
【浮动特点】
1、浮动包括左浮动和右浮动，一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2、浮动元素会脱离文档流但不会脱离文本流，（当浮动时其不会影响周围的盒子模型，但是文字会环绕在浮动元素周围，可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层。）
3、脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
4、当父元素不设高度需要子元素来撑开，而子元素设置浮动就会导致父元素的高度塌陷
【解决高度塌陷】
1.给父级添加高度
2.给父级添加overflow：hidden
3.创建一个空白div,添加clear：both 属性
4.添加一个after伪类::after{content:" "; width:" "; height:" ";display:block;overflow:hidden;visibility:hidden;clear:both;zoom:1}
发表于 2022-12-29 20:25:31
回复(0)
浮动设计之初是为了解决，报纸图片的文字绕排问题。不知道文字绕排的，打开word，将图片设置为“四周型环绕”。
html中有两种元素，1.行元素，2.块元素；设置浮动float后，行元素会环绕在“浮动元素”周围，也就是所谓的文字绕排。
浮动虽然解决的文字绕排问题，但也带来新问题。
“浮动元素”脱离了标准文档流，导致块元素感知不到它。这有两个后果，
1.块元素会被“浮动元素”遮盖。解决办法：块元素加“clear:both”属性。
2.父元素塌陷。解决办法：
1.将父元素设置为行元素，就能感知到“浮动元素”了。加属性“display:inline-block”。
2.在“浮动元素”后面加一个“clear:both元素”，父元素能感知到“clear:both元素”，间接感知到“浮动元素”。
3.父元素后面加伪元素，father::after{ }，原理跟第2个一样。这方法不会新增元素，最流行。
4.给父元素加“overflow:hidden”属性。原理：overflow:hidden会将父元素变为BFC，而BFC能感知浮动元素。
最后：可以把“浮动元素”看做船，行元素看做大海，船浮动在大海上。 这也许是“浮动“的由来。
html中有两种元素，1.行元素，2.块元素；设置浮动float后，行元素会环绕在“浮动元素”周围，也就是所谓的文字绕排。
浮动虽然解决的文字绕排问题，但也带来新问题。
“浮动元素”脱离了标准文档流，导致块元素感知不到它。这有两个后果，
1.块元素会被“浮动元素”遮盖。解决办法：块元素加“clear:both”属性。
2.父元素塌陷。解决办法：
1.将父元素设置为行元素，就能感知到“浮动元素”了。加属性“display:inline-block”。
2.在“浮动元素”后面加一个“clear:both元素”，父元素能感知到“clear:both元素”，间接感知到“浮动元素”。
3.父元素后面加伪元素，father::after{ }，原理跟第2个一样。这方法不会新增元素，最流行。
4.给父元素加“overflow:hidden”属性。原理：overflow:hidden会将父元素变为BFC，而BFC能感知浮动元素。
最后：可以把“浮动元素”看做船，行元素看做大海，船浮动在大海上。 这也许是“浮动“的由来。
编辑于 2022-11-08 23:07:45
回复(0)
float：left/right 特点1.脱离标准流 2.可能会导致盒子高度塌陷 3影响其他元素的排版 解决浮动的方法：1.可以给父盒子设置高度 2.给父级添加overflow：hidden 3.清除浮动
发表于 2022-09-28 10:02:17
回复(0)
①浮动指float属性，他会使元素脱离文档流 ②浮动一般用来实现文字环绕图片效果 ③浮动可能会影响后续兄弟元素的布局以及造成父元素塌陷 ④解决这些影响有三种方式。第一给父元素添加after伪类，这是最推荐的。 father::after｛ content:‘’； display:table； clear:both； ｝ 第二种是给父元素添加overflow:hidden语句，当内部元素超出父元素时，该方法不适用。 第三种是在浮动元素后加标签，为该标签设置clear:both，但会对页面造成不必要的渲染。
发表于 2022-06-09 02:04:49
回复(0)
作用 特点 解决方法
作用是让文字环绕图片，有脱离文档流 容易造成盒子塌陷 影响其他元素排版特点，解决方法常用的有：把父元素的overflow：hidden 给父元素添加高度 父元素添加伪元素 添加clear 建立空白标签
发表于 2023-08-10 11:25:48
回复(0)
问题信息
相关试题
-
扫描二维码，关注牛客网
- 意见反馈
-
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
- 求职之前，先上牛客
-
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
- 公司地址：北京市朝阳区北苑路北美国际商务中心K2座一层-北京牛客科技有限公司
- 联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
- 牛客科技© All rights reserved admin@nowcoder.com
- 京ICP备14055008号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
-
京公网安备
11010502036488号
