我要招人

去企业版

首页 > 试题广场 >

CSS 浮动

[问答题]

解释下浮动和它的工作原理？清除浮动的技巧

太阳煮的酒

浮动：脱离文档流不占据空间

当碰到包含它的边框或者浮动元素的边框停止

清除浮动的方法：

1.在浮动元素后面添加空标签 clear：both

缺点：添加无意义的标签

2.给父元素添加高度

缺点：不灵活

3.给父元素添加overflow：auto/hidden/table

4.伪类标签

.clearfix：after｛

content：“ ”；

display：block

height：0

clear：both

visibility：hidden

｝

.clearfix｛zoom：1｝兼容ie6

编辑于 2019-06-07 09:34:24 回复(0)

zhufree

清除浮动的方法和原理

参考对overflow与zoom”清除浮动”的一些认识
因为float会使元素脱离父元素，包装容器不扩到子元素的浮动元素的高度，造成没有父元素的背景等问题。
清除浮动的几种方法：

clear:both/left/right
clear属性是指元素的两边或某一侧不能有浮动元素，为了达到这个目的，在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。最终使这个元素被挤到浮动元素的下外边距以下。
以这种方法为原理，通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。

更高级的方法是通过伪元素选择器在父元素后面增加了一个clear:both的元素，也就是bootstrap采用的.clearfix

.clearfixt:after{ display:block/table; clear:both; content:"";
}

overflow:hidden/auto
使用这种方法的原理是overflow需要父元素紧贴子元素，所以父元素需要撑大来包裹子元素，需要注意当设置成auto时，如果父元素内容过多，会出现滚动条，而使用hidden时，不能和position配合使用，因为超出的尺寸的会被隐藏。
这个方法不适用于IE6/7，需要加上一个IE特有的属性zoom:1
给父元素设置高度（不推荐）

清除浮动的方法基本上属于clear和使父元素包裹两大类，设置overflow属性，使父元素浮动等都属于第二类，同理，可以设置父元素position:absolute，display:inline-block等，一些具有包裹性的CSS属性，都具有抑制浮动副作用的作用。

编辑于 2016-03-22 16:37:10 回复(0)

LindaYoung45678

应该是overflow:hidden吧

发表于 2015-12-30 17:24:54 回复(3)

孤独的聚能环

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1. 使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2. 使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3. 使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

发表于 2015-07-27 14:14:19 回复(0)

洛雨美

<div class="clearfix"></div>

    */
    .clearfix:after {
        display:block;
        content:"";
        clear: both;
        height:0;
        font-size:0;
        visibility:hidden;
        overflow:hidden;
    }
    .clearfix{
        *zoom:1;
    }

编辑于 2017-09-05 17:35:00 回复(0)

牛客好运好运🙏

浮动元素脱离文档流，不占据空间，当碰到包含它的边框或者浮动元素的边框停止。

清除浮动的方法：

1、在浮动元素后边添加空标签：clear：both 缺点：添加无意义的标签

2、给父元素添加高度。缺点：不灵活

3、给父元素添加overflow：auto/hidden/table

4、伪类标签：

.clearfix:after{

content:" ";

display:block;

height: 0;

clear:both;

visibility:hidden;

}

.clearfix {zoom:1} 兼容IE6

发表于 2020-10-24 12:43:34 回复(0)

伯爵213

浮动脱离文档流在浮动元素后面添加空元素使用css clear：both

/p>bfc伪类

编辑于 2020-09-11 16:28:54 回复(0)

牛客405512320号

浮动会脱离文档流，不占据空间，浮动的元素直到碰到父元素边框或浮动元素边框才会停止。

清除浮动

1.添加空标签

在所有浮动元素末尾添加空标签，设置CSS：clear:both,弊端就是添加了无用的空标签

2.overflow:hidden

给其父元素添加样式，overflow：hidden

3.使用伪类after

content：“”，clear：both，display：block

发表于 2020-04-30 15:52:42 回复(0)

婷儿201911221716770

浮动元素是脱离文档流，不占据空间，碰到包含它的边框或其他浮动元素则停止

发表于 2019-11-27 16:49:32 回复(0)

明白人明白事

1，使用clear:both 清除浮动，加到最后增加一个标签2，overflow :hidden 增加到父元素上

3，使用伪类after清除浮动

浮动元素和绝对定位，固定定位元素都脱离文档流

发表于 2019-10-12 12:57:08 回复(0)

小魂蛋

1、给父亲添加高度 2、设置overflow:hidden 3、添加伪类 4、添加一个空元素 5、clear:both

发表于 2019-08-17 14:17:11 回复(0)

坏小孩。。爱糖糖

闭合浮动1.触发BFC（ie67中等同于haslayout）比如overflow:hidden;display:table-cell;float:;，2.在浮动元素末尾添加一个空元素设置clear:both;

发表于 2015-09-26 12:49:26 回复(0)

提交观点

问题信息

HTML

上传者：孤独的聚能环

难度：

12条回答 612收藏 5350浏览

CSS 浮动

清除浮动的方法和原理

问题信息

热门推荐

相关试题