很多情况下我在写div的时候都不会把高度写死，而是用子元素撑开高度的方式，但是如果子元素设置了浮动或者position绝对定位，就相当于把子元素从文档流中拿出来了，这时父元素的高度就不能被子元素撑开了，那么原本在文档流中跟在父元素后面的元素很有可能被遮挡住。解决方法：

1. 给父元素设置一个最小高度min-height，或者给非绝对定位的子元素设置高度

2. 在父元素结束前添加一个div，清除浮动

浮动元素在窗口缩小时可能会被挤到下面，解决方法：给父元素设置overflow：hidden，这样被挤下去的元素就被隐藏了。

img标签会自带一个边距，解决方法：1. 将img块状化；2. 将img左浮动；3.  为img添加样式img{vertical-align:top|bottom|text-top|text-bottom;}；4. 为img的父级加高度；5. 为img的父级加样式 font-size:0；

【20190129】CSS-定位问题记录的更多相关文章

  1. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  2. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  3. css定位问题的记录

    postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom.兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留.而 ...

  4. pure.css 学习记录

    兼容性记录: IE 8+ Latest Stable: Firefox, Chrome, Safari iOS 6-8 Android 4.x 处理兼容性 <!--[if lte IE 8]&g ...

  5. css布局记录之双飞翼布局、圣杯布局

    双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...

  6. CSS字体记录

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaYAAACnCAIAAADVOG9FAAAgAElEQVR4nOy9eXwcxZk/vL/9ve8eb7 ...

  7. css学习记录

    1 !important 表示此属性需要优先考虑: <head>    <title>Page Title</title>    <style type=&q ...

  8. css一些记录

    比如右侧链接:更多   ,定义此span float:right ,但是 更多 要写在 短标题的左边  比如:<span>更多</span> <font>这是短标题 ...

  9. css 样式 记录

    /* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-bo ...

  10. 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位) 分类： HTML+CSS 2015-05-29 23:01 842人阅读 评论(0) 收藏

    引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: <body> <div id="father-body"&g ...

随机推荐

  1. 数据结构（一）： 键值对 Map

    Map基本介绍 Map 也称为:映射表/关联数组,基本思想就是键值对的关联,可以用键来查找值. Java标准的类库包含了Map的几种基本的实现,包括:HashMap,TreeMap,LinkedHas ...

  2. Jedis 操作 Redis 工具类

    配置类 pom.xml pom.xml 里配置依赖 <dependency> <groupId>redis.clients</groupId> <artifa ...

  3. B - Red and Black 问题思考

    红黑地板问题 There is a rectangular room, covered with square tiles. Each tile is colored either red or bl ...

  4. python中使用双端队列解决回文问题

    双端队列:英文名字:deque (全名double-ended queue)是一种具有队列和栈性质的抽象数据类型. 双端队列中的元素可以从两端弹出,插入和删除操作限定在队列的两边进行. 双端队列可以在 ...

  5. 机器学习基石笔记：06 Theory of Generalization

    若H的断点为k,即k个数据点不能被H给shatter,那么k+1个数据点也不能被H给shatter,即k+1也是H的断点. 如果给定的样本数N是大于等于k的,易得mH(N)<2N,且随着N的增大 ...

  6. iOS开发笔记－根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现

    最近同样是新App,设计稿里出现一种圆形进度条的设计,如下: 想了想,圆形进度条实现起来不难,但是其中显示百分比的文本确需要自适应,虽然可以使用时自己设定文本字体的大小,但是这样显得很麻烦,也很low ...

  7. Python爬虫——反爬

    反爬概述 网络爬虫,是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成. 但是当网络爬虫被滥用后,互联网上就出现太多同质的东西,原创得不到保护. 于是,很多网站开始反网络爬 ...

  8. hdu 6161--Big binary tree（思维--压缩空间）

    题目链接 Problem Description You are given a complete binary tree with n nodes. The root node is numbere ...

  9. python之装饰器（decorator）

    python的装饰器如果用得好,那是大神,用的不好最好别用... 装饰器(decorator)主要包含俩大属性: 1.不能改变原有函数的调用方式 2.不能改变原有函数的代码 第一个表示,我不需要改变原 ...

  10. Migrate from ASP.NET Core 2.0 to 2.1

    http://www.talkingdotnet.com/migrate-existing-aspnet-core-2-application-aspnet-core-2-1/ https://doc ...