说一下浮动？_

说一下浮动？

得分点

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

参考答案

标准回答

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

设置浮动元素的特点：

设置了浮动，该元素脱标。元素不占位置
浮动可以进行模式转换（行内块元素）

浮动造成的影响，使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。

清除浮动的方法：

伪元素清除浮动：给浮动元素父级增加

.clearfix::after {
     content: ''; display: table; clear: both;
 }
/*兼容IE低版本 */
.clearfix {
    *zoom: 1;
}

overflow：hidden：给浮动元素父级增加overflow：hidden属性

额外标签法：给浮动元素父级增加标签

<div class="wrap">
    <div class='left fl'></div>
    <div class='right fl'></div>
    <div style='clear:both'></div>
</div>

加分回答

三种清除浮动的特点和影响

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

延伸阅读

文字环绕图片

<div class="wrap">
        <img src="图片1.png" class='fl' alt="">
        此处文字省略...
</div>

.fl {
    float: left; 
}

不加浮动效果

图片说明

加浮动效果
图片说明

浮动的应用场景-块级元素左右布局

<div class="wrap">
    <div class='left fl'></div>
    <div class='right fl'></div>
</div>

.fl {
    float: left; // 设置浮动
}
.left {
    width: 200px; height: 100px; border: solid 1px red;
}
.right {
    width: 200px; height: 100px; border: solid 1px blue;
}

浮动造成盒子塌陷效果

代码同《2.浮动的应用场景-块级元素左右布局》，父级盒子wrap的高度为0

清除浮动后效果

使用overflow：hidden造成的影响：

<div class="wrap">
    <button>×</button>
</div>

.wrap {
    position: relative;width: 200px;height: 200px;background-color: tomato;
    overflow: hidden; 
}
button { position: absolute;right: -5px;top: -5px;border: solid 1px #ddd; }

效果——overflow: hidden前

图片说明

效果——overflow: hidden后

图片说明

编辑于 2021-09-15 11:48:45 回复(0)

dara羽星

一个元素浮动后会脱离标准流，不占位置，在标准流排版分为水平（行内+行内块级）和垂直（块级），而浮动流排版只有水平排版方式，只能设置某个元素左对齐或者右对齐，没有居中对齐，所以不可以使用margin：0 auto了
在浮动流布局中不再区分块级元素/行内元素/行内块级元素，他们都水平排版，而且都可以设置宽高，所以一个元素设置浮动后，和行内块级元素很像（水平排版，可设置宽高）
浮动元素会脱离标准流，脱标之后，后面的元素会上浮顶替前面元素空出的位置，前面一个元素左浮盖住后面一个元素，浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定
浮动元素具有贴靠现象，如果父元素的宽度足以显示所有的浮动元素，那么浮动的元素会并排显示，若宽度不足，会从最后一个元素开始往前贴靠，如果都空间不足，就会换行贴靠在父元素的左边或者右边
浮动元素具有字围现象，浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,实现文字环绕图片的效果
如何清除浮动以解决浮动元素的父元素的高度塌陷问题

标准流中元素的内容可以撑起父元素盒子的高度，但是浮动的元素是不可以撑起的

（1）给父元素设置高度（少用，因为难以确定具体高度）
（2）给后面的元素添加clear属性

none: 默认取值, 按照浮动元素的排序规则来排序
left: 不要找前面的左浮动元素right: 不要找前面的右浮动元素 both: 不要找前面的左浮动元素和右浮动元素），但是可能会造成margin值的失效，因为找不到看齐的对象了。

（3）给前面元素的末尾添加一个伪类

 .box1::after {
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }