合肥Web培训
达内合肥web培训中心

18130056197

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

  • 时间:2020-11-16 17:06
  • 发布:合肥达内web培训
  • 来源:常见面试题

浮动元素引起的问题:

(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,额外标签法,

(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)

2,使用after伪类

#parent:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

3,浮动外部元素

4,设置`overflow`为`hidden`或者auto

免费预约22大课程试听课

上一篇:解释下浮动和它的工作原理和清除浮动的技巧
下一篇:什么是BFC?

合肥达内web培训:介绍一下box-sizing属性?

quirks模式是什么?它和standards模式有什么区别?

不同年龄段的人该如何做职业规划?

前端工程师到底是什么样的呢?

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

  • 视频学习QQ群

    添加QQ群:1143617948

    免费领取达内课程视频学习资料

Copyright © 2021 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
江西省

贵州省

广西省

海南省