开发者社区> 问答> 正文

前端面试经典题目合集-浮动元素引起的问题和解决办法?

前端面试经典题目合集-浮动元素引起的问题和解决办法?

展开
收起
小柯卡力多 2019-11-25 20:08:50 719 0
1 条回答
写回答
取消 提交回答
  • 浮动元素引起的问题: 1. 父元素的高度无法被撑开,影响与父元素同级的元素 2. 与浮动元素同级的非浮动元素会跟随其后 3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

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

    image.png

    清除浮动的几种方法: 1. 额外标签法,

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

    image.png

    1. 浮动外部元素
    2. 设置 overflow 为 hidden 或者 auto
    2019-11-25 20:10:50
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
阿里文娱大前端技术实践 立即下载
前端代码是怎样智能生成的 立即下载