我要招人

去企业版

首页 > 试题广场 >

浮动元素引起的问题和解决办法

[问答题]

浮动元素引起的问题和解决办法？

坏小孩。。爱糖糖

.clearfix:after {content:"";display:table;clear:both;}
.clearfix {*zoom:1;}

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

孤独的聚能环

浮动元素引起的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素会跟随其后

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：

使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法：

1. 额外标签法，<div style="clear:both;"></div>（缺点：不过这个办***增加额外的标签使HTML结构看起来不够简洁。）

2. 使用after伪类

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

3. 浮动外部元素

4. 设置 overflow 为 hidden 或者 auto

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

太阳煮的酒

浮动缺陷：

1.父元素没有设置高度时，会出现塌陷

2.与浮动元素同级的其他元素会紧跟在浮动元素之后

清除浮动的方法：

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

2.给父元素设置高度

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

4.添加伪类标签：

.clear：after｛

display：block

content：“”

height：0

visibility:hidden

clear：both

｝

编辑于 2019-10-16 09:52:16 回复(0)

牛客好运好运🙏

浮动引起的问题：

1、父元素没有设置高度时，会出现塌陷

2、与浮动元素同级的其他元素会紧跟在其后。

清除浮动的方法：

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:48:54 回复(0)

伯爵213

父元素高度塌陷 bfc

编辑于 2020-09-11 16:31:13 回复(0)

牛客318475015号

浮动元素早起用于制作文字环绕效果！会让对象脱离文档流，最具体的表现就是浮动元素的父级元素会失去高度解决办法：1.给父级盒子一个固定高度2.在浮动元素后加一个空盒子设置样式clear：both；来清除浮动3.通过给父级元素后加伪类：after{content:’’;height :0;display:block;clear:both;}4.给父元素设置overflow：hidden；

发表于 2020-07-14 10:33:46 回复(0)