千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 如何去除浮动

如何去除浮动

来源:千锋教育
发布人:wjy
时间: 2022-09-07 16:54:10 1662540850

清除浮动的几种方法:

1. 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:”“;}

如何去除浮动

2. overflow:hidden/auto

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

3. 给父元素设置高度(不推荐)

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

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT