请解释css中的浮动，以及清浮动的方法_同程旅行笔试题

Rosevil

一、什么是浮动

通过设置float的值不为none，使得元素按特定的方向脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

二、浮动带来的问题

1. 父元素高度塌陷；

2. 浮动元素后的同级非浮动元素紧随其后；

3. 若浮动元素非同级第一个元素，其前面的元素也需要设置浮动，否则会被遮挡。

三、清除浮动的方法

1. 浮动元素后加一个空div，设置clear:both；

2. 父元素overflow: hidden/auto；zoom:1;

3. 父元素加clearfix类，定义如下：

.clearfix:after{

display:block;

content:''';

height:0;

clear:both;

visibility:hidden;

}

.clearfix{

*zoom:1; //IE6触发hasLayout

}

4. 固定父元素高度

发表于 2017-08-21 11:33:35 回复(0)

珠江牛塘

定义：

元素尽可能地向左或向右移动，直到碰到父元素边框或其他浮动元素的边框为止
浮动元素会脱离文档流，不占据原来的空间，不会影响前面的元素，后面的元素会重新排列

问题：

父元素高度塌陷
后面的元素占据浮动元素原来的位置，被浮动元素覆盖

清除浮动：

父元素设置高度
父元素设置成 BFC（overflow: hidden），BFC 不会与浮动元素重叠
浮动元素之后添加一个空标签，设置 clear: both 清除浮动
父元素添加一个伪元素，设置 clear: both 清除浮动（注：clear: both 只对块级元素生效）

发表于 2022-09-07 08:53:54 回复(0)

mMelisa

.clearfix:before, .clearfix:after {

display: table;

content: " ";

}

.clearfix:after {

clear: both;

}

.clearfix{

*zoom: 1;

}

发表于 2017-08-29 14:56:18 回复(0)

石壹笑

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

清除浮动的几种方法：

    1.额外标签法，<div style="clear:both;"></div>/*（缺点：不过这个办***增加额外的标签使HTML结构看起来不够简洁。） */ 2.浮动父元素 /* 过多使用与Web精髓相违背 */ 3.设置overflow为hidden或者auto 4.使用after伪类 #parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both;

        } /* 优化为 ====> */ .clearfix:after, .clearfix:before{ content: " "; display: table;
      } .clearfix:after{ clear: both;
      } /* 伪类before可以解决浏览器顶部空白部分，即上下margin重合问题 */

发表于 2017-08-23 17:40:15 回复(0)

背题背题背题

css中的浮动：

通过给元素的CSS样式添加float：left/right实现元素块向左或者向右浮动，在浮动过程中，元素会脱离文档流，变为行级块元素

对于其兄弟元素（非浮动），如果为块级元素，会顶替原来浮动元素的位置，如果为行级元素，会环绕浮动元素

弊端：会造成父级高度坍塌

清除浮动的方法：

（1）在父级添加：overflow：hidden（利用BFC）

（2）在末尾添加空标签<div></div>,给该空节点添加clear：both

（3）利用before伪元素

发表于 2017-08-20 08:54:08 回复(0)

UnKid

.clearFloat{zoom:1}

clearFloat{content:"";display:"block";height:0;clear:both;visibility:hidden}

发表于 2017-08-19 22:37:35 回复(0)

Rain..

浮动，是指一个元素的属性为float：right或left，会一直朝左（或右）移动直到碰到父元素的内部边界为止。

浮动的元素脱离正常文档流，但是自己本身要遵守浮动的好像是八大定律（详见css权威指南），

清除浮动一般有很多方法，常见有：

1.空标签设置clear both；

2.设置父级元素overflow ，

3.利用bfc原理（其实2就是得）；

4.伪类

等等。。。。。。。

发表于 2017-02-26 21:07:24 回复(0)

半个淑女

浮动元素的父元素也设置浮动在浮动元素的最后面加一个标签，清除浮动添加伪类标签:after，content设置为空，daisplay为table

发表于 2016-12-02 21:20:19 回复(0)

请解释css中的浮动，以及清浮动的方法

问题信息

热门推荐

相关试题